Table > no-use space in the row

it does not work, but i did it with it :

padding-left: 60% !important;

but on mobile, there is no line break :/

Do you know how I can add it please ?

You’re right. My white-space was on “nowrap”…

but i changed the text-align, no change.

But now on iphone, i have also a new pb : some title cells are placed on the top of the above row :/ : http://lapousse.fr/comparatif-offres-site-internet

My new CSS :

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px 0px !important;
    table-layout: fixed;
}

/* Zebra striping */
tr:nth-of-type(odd) {
  background: #eee;
}

th { /* column 1 - desktop view */
    background: #444444;
    color: white;
    font-weight: bold;
    text-align: left;
    white-space:normal;
    font-weight: normal;
    padding: 12px;
    font-style: normal !important;
    border-bottom: 0;
    position: relative;
}

td, th { /* column 1 - desktop view */
  padding: 6px;
  text-align: left;
}

td:after {
  height: 1px;
  background: #fff;
  content: '';
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

th:after {
  height: 1px;
  background: #fff;
  content: '';
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

table, thead, tbody, th, td, tr { /* Force table to not be like tables anymore */
    display: block;
}

thead tr { /* cacher les éléments entre ces balises en mobile view */
    position: absolute;
    top: -9999px;
    left: -9999px;
}

td:before { /* colomn 1 - mobile view */
    position: absolute;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: normal;
    text-align: left;
    color: #444444;
}

td { /* colomn 2 - mobile view */
    border: none !important;
    border-bottom: 1px solid #ffffff !important;
    position: relative;
    padding-left: 60% !important;
    background-color: #f6f6f6;
    text-align: right;
    min-height: 40px;
}

/* Label the data */
    td:nth-of-type(1):before { content: "Site Vitrine"; }
    td:nth-of-type(2):before { content: "Site Catalogue"; }
    td:nth-of-type(3):before { content: "Site Ecommerce"; }

}

.border-top-rounded { /* class pour l'en-tête du tableau */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
}

td { /* desktop view */
    text-align: center;
    white-space: normal;
    padding: 12px;
    border-left: 2px solid;
    border-right: 2px solid;
    border-bottom: 0;
    position: relative;
    background-color: #f6f6f6
}

@media (min-width: 768px){
table tr th:first-child {
  width: 40%;
  white-space: normal;
}
table tr td {
  white-space: normal;
}
}

table tr:first-child th:after {
  height: 0;
}

It is ok for the text align. I had to add “text-align: right !important;”

But I have always my problem on iphone with some row which are placed on the top of others rows

yes always here :

td:before { /* mobile view > contenu de la colonne 1 */
position: absolute;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: normal;
text-align: left;
color: #444444;
min-height: 40px;
}

hum i have fixed it but i do not know why this problem is appeared.

I had to change the width of this (from 45% to 50%)

td:before { /* mobile view > contenu de la colonne 1 */
    width: 50%;
}

Thanks very much for your time and your help. It is really great, thanks