如何用CSS模拟"<TABLE RULES>"？

Question

我正在使用ExtJS编写Web应用程序.我把一张桌子放在桌子里面,由于种种原因,不可能将它全部重构成一个带有rowspan/colspan等的大桌子.

"外部"表格的单元格周围有边框.我希望我的"内部"表格在其单元格之间有边界,这样我最终会"分裂"现有("外部")单元格.

如果它让事情变得更清楚,那就是我正在拍摄的,因为(可怜的)ascii art:

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

("内部"表看起来像一个井字游戏网格;"外部"表格的单元格具有完整的边框)

我环顾四周,发现了一个<table>名为的属性RULES,听起来就是这样.但是,它似乎得不到很好的支持,无论如何我不应该把风格放在标记中(对吧？).我发现的文档说"使用CSS代替",但我似乎无法找到一种简单的方法来说明"在单元格之间放置边框,但如果单元格的边缘接触到表格的外部则不会" .救命？

Answer 1

这个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.

Answer 2

你可以解除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行进行.