如何更改第一行的颜色？答案

【问题标题】：How to change the color of the first line?如何更改第一行的颜色？
【发布时间】：2018-04-18 11:52:17
【问题描述】：

我正在尝试为我的表格设置彩色背景。我希望当它处于响应式表单时，图片中选择的第一行（以“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>

【问题讨论】：

你能澄清一下问题是什么，预期的结果是什么，你做了什么？
附图结果与提供的代码结果不同
附上的图片是我的响应式表格（您可以通过调整窗口大小来检查）。我想为附图中的选定线条（红色）添加彩色背景。

标签： responsive-design html-table background-color responsive

【解决方案1】：

你可以用:pseudo做你想做的事，我只添加了两条规则

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>

希望这会有所帮助:)

【讨论】：