Question

每个TD元素在表格上设置奇数/偶数样式但由于行跨度不起作用。在http://jsfiddle.net/eFp7F/61/

上试用

CSS样式：

.tablerow1 td {
    background-color:#FFFFFF;
}
.tablerow2 td {
    background-color:green;
}

HTML CODE：

<table border="1">
    <tr>
        <th>Type</th>
        <th>Description</th>
        <th>Number</th>
    </tr>
    <tr class="tablerow1">
        <td rowspan="1"><p>Cash</p></td>
        <td><p>Cash</p></td>
        <td><p>00000</p></td>
    </tr>
    <tr class="tablerow2">
        <td rowspan="2"><p>Receivables</p></td>
        <td><p>Receivable</p></td>
        <td><p>00</p></td>
    </tr>
    <tr>
        <td><p>Accounts</p></td>
        <td><p>0</p></td>
    </tr>
</table>

如何解决这个问题？

Answer 1

您可以使用css交替应用颜色。

.tablerow1 td:nth-child(even) {
    background-color:#FFFFFF;
}
.tablerow2 td:nth-child(odd) {
    background-color:green;
}

Answer 2

尝试伪元素:nth-of-type DEMO

td:nth-of-type(odd) {
  background-color:#666;
}
td:nth-of-type(even) {
  background-color:green;
}

Answer 3

<td rowspan="2"><p>Receivables</p></td>标记具有类“tablerow2”。即使它被涂抹在多行上，它仍然具有该类。

Answer 4

在任何情况下都无法使其与CSS一起使用。您必须使用JS来调整表格。

如果您使用的是jQuery，则可以这样做：

// each table cell with rowspan
$('table tr>*[rowspan]').each(function(){ 
  // get rowspan attribute
  let rowspan = $(this).attr('rowspan');
  // cast it to a useful numeric value
  rowspan = (typeof rowspan == 'string' || typeof rowspan == 'number') ? parseInt(rowspan): 1;
  // if 1 or below, no adjustments are necessary
  if (rowspan > 1) {
    // row of the affected cell
    let row = $(this).parent();
    // all silbing rows including the affected one
    let rows = row.parent().children();
    // index of the last potential row to be adjusted
    let indexlast = row.index()+rowspan-1;
    // for first row after rowspan to last one affected
    for (let i = row.index()+1; i<=indexlast; i++) {
      // if an affected sibling row has not the same modulo 2 index (equals odd and even or even and odd)
        if (row.index() % 2 != i % 2){
          // adds a class to reverse the logic
          rows.eq(i).addClass('reverse-even-odd');
        }
    }
    // only even numbered rowspans, to fix coloring on sequent elements
    if (rowspan % 2 == 0){
      // inserts a clearing row
      $('<tr class="clear-even-odd"></tr>').insertAfter(rows.eq(indexlast));
    }
  }
});

和CSS：

table tr:nth-child(odd).reverse-even-odd,
table tr:nth-child(even){
background-color:#faa /* any color */
}
table tr:nth-child(even).reverse-even-odd,
table tr:nth-child(odd){
background-color:#aaf /* any color */
}

请注意，代码并未针对跨行使用多个不同的行进行优化-但这反而会杀死着色。

请注意，这样做是为了保留行跨度的字段颜色。受影响的行的所有其他单元格都以相同的颜色显示。但是可以使用相同的技术来获得不同的结果。

请注意，用于基于索引或使用排序的表所使用的逻辑不能那样工作，并且这些逻辑也必须进行调整。但是，通常必须自定义此类内容才能在具有合并单元格的表上工作。

在rowpan tablerow的奇数或甚至颜色

4 个答案: