如何改变第一行的颜色？

Question

我正在尝试为我的桌子获得彩色背景。我希望当它处于响应形式时，图片中选择的第一行（以这个单词“Caracteristiques”开头的行）具有特定的背景颜色来构造我的表，这可能吗？

	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

您可以使用:pseudo执行您要执行的操作，我只添加了两个规则

＆＃13;

＆＃13;

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;
    }
}

＆＃13;

	<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>

＆＃13;

＆＃13;

＆＃13;

希望这会有所帮助：）