代码之家  ›  专栏  ›  技术社区  ›  Rob Van Dam

边框折叠时样式行或列而不是单元格:分隔

  •  5
  • Rob Van Dam  · 技术社区  · 15 年前

    我有一张桌子,出于其他原因,我更喜欢保持桌子折叠:分开。但是,我希望能够突出显示单个行或列。不幸的是,似乎任何样式都适用于 <tr> <col> 标签只适用于单元格,而不是它们之间的空间。例如:

    <style>
      td { width: 10px; height: 10px; }
    </style>
    <table style="background-color: purple">
      <colgroup>
        <col span="2">
        <col style="background-color: red;">
        <col span="2">
      <colgroup>
      <tr><td><td><td><td><td></tr>
      <tr><td><td><td><td><td></tr>
      <tr style="background-color: orange;"><td><td><td><td><td></tr>
      <tr><td><td><td><td><td></tr>
      <tr><td><td><td><td><td></tr>
    </table>
    

    结果在紫色表格中,5个垂直单元格和5个水平单元格填充颜色,但不是整个行或列。

    除了使用border-collapse之外,我还有其他选择吗:collapse来填充给定行或列中单元格之间的空间?

    3 回复  |  直到 7 年前
        1
  •  1
  •   alemjerus    15 年前

    如果使用恒定的行宽,则可以使用 colspan 将某一行的所有单元格合并到一个单元格中,然后在其中创建一个新表,并使用所选背景色分隔边框。

        2
  •  4
  •   instanceof me    15 年前

    不与 border-collapse: separate , the W3C specifications 确切地说:

    请注意,如果表具有“border collapse:separate”,“border spacing”属性指定的区域背景始终是表元素的背景。见 separated borders model .

    还有:

    在[边框间距]空间中,行、列、行组和列组背景不可见,允许表背景显示。行、列、行组和列组不能有边框(即,用户代理必须忽略这些元素的边框属性)。

    您可能需要检查表css上的浏览器兼容性:

        3
  •  0
  •   Alkanshel    9 年前

    table-collapse: separate 因为这个原因,细胞间距有点糟糕。您最好是折叠边框并手动填充CSS中的单个单元格。