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


Keywords: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?

enter image description here

	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>

1 Answer: 

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>