Question

我有一个我必须通过代码构建的表，因为它表示基于人名的查询中的分组数据。所以人xyz有4行数据...我的问题是我如何为每个颜色的组交替设置这个样式？

这是我到目前为止所做的工作，但是每个单元格的顶部和底部都有间隙，我希望这些组的颜色是实心的......没有间隙......我给了表格行和td候选的类名称为要着色的.alternate

tr.alternate{background-color:#aaa;}
td.alternate{background-color:#aaa}

Answer 1

您可以在表格中使用border-collapse: collapse。

border-collapse CSS属性选择表格的边框模型。这个   对表格单元的外观和风格有很大的影响。

分离的模型是传统的HTML表格边框模型。   相邻的细胞各自具有其独特的边界。距离   它们之间由边界间距属性给出。

在折叠边框模型中，相邻的表格单元格共享边框。在   那个模型，插图的边框式值就像凹槽一样   开头表现得像山脊。

来源： border-collapse developer mozilla

没有border-collapse的示例：

＆＃13;

tr.alternate {
  background-color: #aaa;
}

＆＃13;

<table>
  <tr class="alternate">
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr class="alternate">
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
</table>

＆＃13;

border-collapse的示例：

＆＃13;

table {
  border-collapse: collapse;
}
tr.alternate {
  background-color: #aaa;
}

＆＃13;

<table>
  <tr class="alternate">
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr class="alternate">
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
</table>

＆＃13;

正如您所看到的，您不需要为td单独上课。

如何折叠表格样式中的空白？

1 个答案: