Question

我正在设计几个表格，这些表格包含一行数据。每行应该在表格的宽度上可读，因此我将为交替的行添加浅色背景颜色。

是否有“最佳做法”来决定表格的第一行是否应该具有白色或颜色背景？

Answer 1

就最佳做法而言，第一行应与表头颜色形成对比。代码如下：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script TYPE="text/javascript">
$(document).ready(function() {
	zebraRows('tbody tr:odd td', 'odd');
});
	
//used to apply alternating row styles
function zebraRows(selector, className)
{
  $(selector).removeClass(className).addClass(className);
}
  
// Tweak as required
$(function(){
	$("table").css("width", "80%");
	$("th").css("text-align", "left");
	$(".index").css("width", "50px");
	$(".u_date").css("width", "150px");
});
</script>

＆＃13;

Answer 2

最好的选择是:nth-child css选择器！

对于颜色，你不能错过浅灰色的背景。与此网站对代码段的处理方式类似。

将一个类应用到您的表中并像这样使用它。

.table {
  border-collapse: collapse;
}
.table th, .table tr, .table td {
  border: 1px solid black;
}
.table tr:nth-child(odd) {
  background: #f2f2f2;
}
.table td {
  padding: 3px;
}

<table class="table">    
    <tr>
        <td>Something</td>
        <td>Cool</td>
        <td>Here</td>
    </tr>
    <tr>
        <td>Something</td>
        <td>Cool</td>
        <td>Here</td>
    </tr>    
    <tr>
        <td>Something</td>
        <td>Cool</td>
        <td>Here</td>
    </tr>
</table>

修改

编辑我的摘要以更好地反映这个问题。

Answer 3

使用nth-child（偶数）或nth-child（odd），查看我的codepen。

实施例

td:nth-child(even) {
  background:#d7d7d7;
}

在表行上交替背景颜色的最佳实践

3 个答案:

修改