How to change the color of the first line? - responsive-design

Question

I'm trying to achieve a colored background for my table. I want that when it is on its responsive form, the first lines that are selected in the picture (the lines that start with this word "Caracteristiques") have a specific background color to structure my table, is this possible?
body{font-family:'Varela Round';}
th {
background: #333;
color: white;
font-weight: bold;
}
#media (max-width: 500px) {
.responsive-table-line td:before { content: attr(data-title); }
.responsive-table-line table,
.responsive-table-line thead,
.responsive-table-line tbody,
.responsive-table-line th,
.responsive-table-line td,
.responsive-table-line tr {
display: block;
}
.responsive-table-line thead tr {
display:none;
}
.responsive-table-line td {
position: relative;
border: 0px solid transparent;
padding-left: 50% !important;
white-space: normal;
text-align:right;
}
.responsive-table-line td:before {
position: absolute;
top: 0px;
left: 0px;
width: 45%;
padding-right: 15px;
height:100%;
white-space: nowrap;
text-overflow: ellipsis !important;
overflow:hidden !important;
text-align:left;
background-color:#f8f8f8;
padding:2px;
}
}
<div class="responsive-table-line" style="margin:0px auto;max-width:700px;">
<table class="table table-bordered table-condensed table-body-center" >
<thead>
<tr>
<th class="data-title">Caractéristiques</th>
<th>Quantité </th>
<th>Part CAC 40</th>
<th>Part Filiales +1000K€</th>
<th>Contacts IT</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Caractéristiques">Société</td>
<td data-title="Quantité">230</td>
<td data-title="Part CAC 40">40</td>
<td data-title="Filiales +1000K€">190</td>
</tr>
<tr>
<td data-title="Caractéristiques">Contacts</td>
<td data-title="Quantité">16 700</td>
<td data-title="Part CAC 40">10 000</td>
<td data-title="Filiales +1000K€">6 700</td>
<td data-title="Contacts IT">21%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Email nominatif</td>
<td data-title="Quantité">16 700</td>
</tr>
<tr>
<td data-title="Caractéristiques">Opt-out</td>
<td data-title="Quantité">3%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Lignes directes/mobiles</td>
<td data-title="Quantité">35%</td>
</tr>
<tr>
<td data-title="Caractéristiques">% Contact IT</td>
<td data-title="Quantité">21%</td>
</tr>
</tbody>
</table>
</div>

Answer 1

You can do what you are trying to do with :pseudo, I have added just two rules
body {
font-family: 'Varela Round';
}
th {
background: #333;
color: white;
font-weight: bold;
}
#media (max-width: 500px) {
/**** Added CSS Rules ****/
tr:nth-child(1n+1) td:first-child {
background: red;
}
tr:nth-child(1n+1) td:first-child:before {
background: red;
}
/**** End of Added CSS Rules ****/
.responsive-table-line td:before {
content: attr(data-title);
}
.responsive-table-line table,
.responsive-table-line thead,
.responsive-table-line tbody,
.responsive-table-line th,
.responsive-table-line td,
.responsive-table-line tr {
display: block;
}
.responsive-table-line thead tr {
display: none;
}
.responsive-table-line td {
position: relative;
border: 0px solid transparent;
padding-left: 50% !important;
white-space: normal;
text-align: right;
}
.responsive-table-line td:before {
position: absolute;
top: 0px;
left: 0px;
width: 45%;
padding-right: 15px;
height: 100%;
white-space: nowrap;
text-overflow: ellipsis !important;
overflow: hidden !important;
text-align: left;
background-color: #f8f8f8;
padding: 2px;
}
}
<div class="responsive-table-line" style="margin:0px auto;max-width:700px;">
<table class="table table-bordered table-condensed table-body-center" >
<thead>
<tr>
<th class="data-title">Caractéristiques</th>
<th>Quantité </th>
<th>Part CAC 40</th>
<th>Part Filiales +1000K€</th>
<th>Contacts IT</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Caractéristiques">Société</td>
<td data-title="Quantité">230</td>
<td data-title="Part CAC 40">40</td>
<td data-title="Filiales +1000K€">190</td>
</tr>
<tr>
<td data-title="Caractéristiques">Contacts</td>
<td data-title="Quantité">16 700</td>
<td data-title="Part CAC 40">10 000</td>
<td data-title="Filiales +1000K€">6 700</td>
<td data-title="Contacts IT">21%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Email nominatif</td>
<td data-title="Quantité">16 700</td>
</tr>
<tr>
<td data-title="Caractéristiques">Opt-out</td>
<td data-title="Quantité">3%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Lignes directes/mobiles</td>
<td data-title="Quantité">35%</td>
</tr>
<tr>
<td data-title="Caractéristiques">% Contact IT</td>
<td data-title="Quantité">21%</td>
</tr>
</tbody>
</table>
</div>
Hope this helps :)