Question

我在很多不同的页面上创建了很多不同的表（db-driven），我想强加一致的样式：

第一行和最后一行：粗体字体 - 反转前景/背景所有其他行斑马条纹。

基本上只是实现'页眉/页脚'行和斑马条纹数据行。我已经看过一些jQuery示例并且稍微使用它但不足以确信没有更好的CSS，并且知道最好的方法来概括它以便最容易重复使用。 / p>

很想看到将css（如果适用）与jquery进行比较的示例 THX

Answer 1

有一个很棒的jQuery插件叫做datatables，但它对你来说可能有些过分。 http://www.datatables.net/

只要你使用THEAD和TFOOT使用干净的表格标记，CSS就可以了。

<TABLE>
<THEAD>
     <TR> ...header information...
</THEAD>
<TFOOT>
     <TR> ...footer information...
</TFOOT>
<TBODY>
     <TR> ...first row of block one data...
     <TR> ...second row of block one data...
</TBODY>
<TBODY>
     <TR> ...first row of block two data...
     <TR> ...second row of block two data...
     <TR> ...third row of block two data...
</TBODY>
</TABLE>

然后你可以使用这样的css：

.decoration table { background-color: white;}
.decoration thead, .decoration tfoot { font-color:white; background-color:black; }
.decoration tbody tr.even td {background-color:gray;}
.decoration tbody tr.odd td {background-color:white;}

Answer 2

除了接受的答案，并希望随着IE6的消失，您可以考虑伪选择器。类似的东西：

tbody tr:nth-child(2n+1) { background-color: #abcdef; } 
tbody tr:nth-child(2n) { background-color: #012345; }

这两个添加奇数和偶数颜色。然后提供更流畅的用户体验：

tbody tr:hover { background-color: #ffffff; } /* highlight row */
tbody td:hover { background-color: #eeeeee; } /* highlight cell */

Answer 3

只使用CSS，你可以只为trs创建类，并在构建表时分配它们。像这样的东西：

tr bold { font-weight: bold; } /* for first and last */
tr even { background-color: #fff; }
tr odd  { background-color: #ddd; } /* for zebra rows */

然后，在构建表时应用所述类。

在jQuery中，你可以通过trs使用循环，检查它们是偶数还是奇数并应用正确的样式，然后使用：first-child＆amp; ：last-child选择器，用于在第一行和最后一行设置粗体。

创建可重用样式<table> </table>的最佳方法

3 个答案: