如何用 CSS 模拟“<TABLE RULES>”？

Posted 2023-03-05

【中文标题】如何用 CSS 模拟“<TABLE RULES>”？

【英文标题】：How can I emulate "<TABLE RULES>" with CSS?

【发布时间】：2011-08-18 17:54:16

【问题描述】：

我正在使用 ExtJS 编写一个 Web 应用程序。我将一个表放在一个表中，由于各种原因，无法将其全部重构为一个具有行跨度/列跨度等的大表。

“外部”表格的单元格周围有边框。我希望我的“内部”表格在其单元格之间有边界，这样我就可以得到“拆分”现有（“外部”）单元格的效果。

如果它使事情更清楚，这就是我所追求的，作为（糟糕的）ascii 艺术：

-----------------
|               |
|     |   |     |
|  -----------  |
|     |   |     |
|  -----------  |
|     |   |     |
|               |
-----------------

（“内部”表格看起来像井字游戏网格；“外部”表格的单元格有一个完整的边框）

我环顾四周，发现了一个名为RULES 的<table> 属性，听起来就是这样做的。但是，它似乎没有得到很好的支持，无论如何我不应该将样式放在标记中（对吗？）。我找到的文档说“改用 CSS”，但我似乎找不到一种简单的方式来表示“在单元格之间设置边框，但如果单元格的边缘接触到表格的外部则不会”在 CSS .帮忙？

【问题讨论】：

FWIW，我通过强制包含单元格没有边框并为“内部”表格提供完整边框获得了类似的效果，但我认为不弄乱框架样式会更干净......

我记得@rules 无论如何都没有那种效果。它并没有阻止边界连接，它...会给你一个有点像jsfiddle.net/rhyaniwyn/QNK55/1的效果，通过使用border="1" rules="rows"

【参考方案1】：

简单示例：http://jsfiddle.net/xixionia/v3eVq/

简单表格（虽然没有 tbody）：

<table>
    <tr>
        <td>00</td>
        <td>01</td>
        <td>02</td>
    </tr>
    <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr>
        <td>20</td>
        <td>21</td>
        <td>22</td>
    </tr>
</table>

简单的 CSS（虽然不完全兼容所有浏览器）：

/* outline */
table

    border: 2px solid red;


/* rows */
tr

    border-top: 2px solid black;
    border-bottom: 2px solid black;


/* columns */
td

    padding: 10px;
    border-left: 2px solid black;
    border-right: 2px solid black;


/* resets */
tr:first-child

    border-top: none;


tr:last-child

    border-bottom: none;


td:first-child

    border-left: none;


td:last-child

    border-right: none;

W3 Schools 上的伪选择器参考：http://www.w3schools.com/css/css_pseudo_classes.asp

而不是使用伪选择器：

您可以为每个第一个孩子和最后一个孩子设置一个类，并将该类用作您的选择器。

【参考方案2】：

这个http://codepen.io/morewry/pen/GnBFu 是我所能得到的。我怀疑会有一些支持问题并且单元格的对齐方式偏离border-spacing的数量。

table
    table-layout:fixed;
    border-collapse:separate;
    border-spacing:0.25em;
    border:1px solid red;

    tr
        display:block;
        border-bottom:1px dashed blue;
    
    tr:last-child border:0; 
        td
            padding-right:0.25em;
            vertical-align:top;
            border:1px dotted orange;
            border-width:0 1px;
        
        td:first-child,
        td + td border-left:0; 
        td:last-child padding-right:0; border-right:0; 

编辑

重新阅读后，我意识到您不是在单个表格中寻找单独的边框，而只是为了抑制除了嵌套表格上的单元格之间的边框。这要简单得多http://codepen.io/morewry/pen/yxvGg：

table
    table-layout:fixed;
    border-collapse:collapse;
    border-spacing:0;
    border-style:hidden;

    td
        padding:0.25em;
        border:1px solid black;
    

边框冲突解决说明border-style:hidden 优先，因此在折叠模型中出现的只有单元格之间。

这里唯一的问题是 IE 不支持隐藏，因此对于 IE，您需要解决方法。伪类应该适用于 IE8。我认为 IE7 不支持 :last-child，因此它需要一些额外的帮助，而 IE6 需要针对 :first-child 和 :last-child 的解决方法。

对于IE8和IE7，下面会模拟border:hidden

table border:2px solid transparent; 

在这些浏览器中，您会获得 2 个额外像素的透明空间，但效率更高。我记得 IE6 不能正确支持透明边框，它仍然存在问题。见http://codepen.io/morewry/pen/bIvJa。

【讨论】：

border:hidden 的魔力（尤其是它与border:none 的不同之处）正是我所寻找的；虽然 IE 不支持它。

我突然想到，您可以通过执行以下操作来扩展对隐藏的支持，以利用边界冲突解决的另一个方面，请参阅jsfiddle.net/c4Sp4/1。 border:2px solid transparent; 应该在 IE7 中工作。然后border-style:hidden;在其他浏览器中省略多余的像素。

【参考方案3】：

您可以取消 Mozilla 对 rules 属性的实现，该属性完全在 CSS 中：

http://hg.mozilla.org/mozilla-central/file/3fd770ef6a65/layout/style/html.css#l289 和 http://hg.mozilla.org/mozilla-central/file/3fd770ef6a65/layout/style/html.css#l337 是样式，一直到第 410 行。

【参考方案4】：

HTML5 规范的“Rendering”部分中有 CSS 规则。只需选择您要查找的 rule 值并获取相应的 CSS。让我复制并粘贴<table rules=...>的规则：

注意：属性选择器中的“i”是 CSS4 并且忽略大小写。 IE。 rules=ROWS 和 rules=rows 一样好。

table 
  box-sizing: border-box;
  border-spacing: 2px;
  border-collapse: separate;
  text-indent: initial;


table, td, th  border-color: gray; 
thead, tbody, tfoot, tr  border-color: inherit; 
table[rules=none i], table[rules=groups i], table[rules=rows i],
 ... and many more selectors in this fashion ...
table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th 
  border-color: black;


table[rules=none i], table[rules=groups i], table[rules=rows i],
table[rules=cols i], table[rules=all i] 
  border-style: hidden;
  border-collapse: collapse;


table[rules=none i] > tr > td, table[rules=none i] > tr > th,
table[rules=groups i] > tr > td, table[rules=groups i] > tr > th,
table[rules=rows i] > tr > td, table[rules=rows i] > tr > th 
   ... more selectors for none/groups/rows ...

  border-width: 1px;
  border-style: none;

table[rules=cols i] > tr > td, table[rules=cols i] > tr > th,
table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,
table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,
table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th 
  border-width: 1px;
  border-style: none solid;

table[rules=all i] > tr > td, table[rules=all i] > tr > th,
table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,
table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th,
table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th 
  border-width: 1px;
  border-style: solid;


table[rules=groups i] > colgroup 
  border-left-width: 1px;
  border-left-style: solid;
  border-right-width: 1px;
  border-right-style: solid;

table[rules=groups i] > thead,
table[rules=groups i] > tbody,
table[rules=groups i] > tfoot 
  border-top-width: 1px;
  border-top-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;


table[rules=rows i] > tr, table[rules=rows i] > thead > tr,
table[rules=rows i] > tbody > tr, table[rules=rows i] > tfoot > tr 
  border-top-width: 1px;
  border-top-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;