我有一张横跨整个页面的表格。
我斑马条带化使用nth-child上tr的设置background行的。问题在于它仅对单元格着色，而不是对整个行着色。您可以在彩色行的每个单元格之间看到空白。
你可以在这里看到一个例子
table {
width: 100%;
}
tr:nth-child(even) {
background: peachpuff;
}<table>
<tbody>
<tr>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>1</td>
<td>0</td>
</tr>
<tr>
<td>2</td>
<td>0</td>
</tr>
<tr>
<td>3</td>
<td>0</td>
</tr>
<tr>
<td>4</td>
<td>0</td>
</tr>
<tr>
<td>5</td>
<td>0</td>
</tr>
<tr>
<td>6</td>
<td>0</td>
</tr>
<tr>
<td>7</td>
<td>0</td>
</tr>
<tr>
<td>8</td>
<td>0</td>
</tr>
<tr>
<td>9</td>
<td>0</td>
</tr>
</tbody>
</table>如何更改background整个行而不是每个单元格的颜色？
添加border-collapse:collapse到table
border-collapse CSS属性确定表格的边框是分隔还是折叠。在分离的模型中，每个相邻的单元格都有各自不同的边界。在折叠模型中，相邻的表格单元格共享边界。
分离的模型是传统的HTML表边框模型。每个相邻的单元格都有各自不同的边界。它们之间的距离由border-spacing属性给出。
在折叠的边框模型中，相邻的表格单元格共享边框。在该模型中，inset的边框样式值的行为类似于沟槽，而outset的行为类似于脊。
table {
width: 100%;
border-collapse:collapse;
}
tr:nth-child(even) {
background: peachpuff;
}<table>
<tbody>
<tr>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>1</td>
<td>0</td>
</tr>
<tr>
<td>2</td>
<td>0</td>
</tr>
<tr>
<td>3</td>
<td>0</td>
</tr>
<tr>
<td>4</td>
<td>0</td>
</tr>
<tr>
<td>5</td>
<td>0</td>
</tr>
<tr>
<td>6</td>
<td>0</td>
</tr>
<tr>
<td>7</td>
<td>0</td>
</tr>
<tr>
<td>8</td>
<td>0</td>
</tr>
<tr>
<td>9</td>
<td>0</td>
</tr>
</tbody>
</table>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句