我如何模仿“< TABLE RULES>”用CSS？ [英] How can I emulate "<TABLE RULES>" with CSS?

问题描述

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

I'm writing a web application using ExtJS. I'm putting a table inside a table, and for various reasons it's impossible to refactor it all into one big table with rowspan/colspan, etc.

外面表格的单元格周围有边框。我希望我的内部表格在的单元格之间有的边界，这样我就可以分裂现有（外部）单元格。

The "outside" table has borders around its cells. I'd like my "inside" table to have borders between its cells, so that I wind up with the effect of "splitting" the existing ("outside") cell.

如果事情变得更清楚，那就是我正在拍摄的东西，因为（差）ascii art：

If it makes things clearer, this is what I'm shooting for, as (poor) ascii art:

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

（内部表格看起来像一个井字游戏网格;外部表格的单元格具有不间断的边框）

(The "inner" table looks like a tic-tac-toe grid; the "outer" table's cell has an unbroken border)

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

I looked around, and found a <table> attribute called RULES, which sounds like it does just this. However, it seems to be poorly supported, and anyway I'm not supposed to put style in markup (right?). The documentation I've found says "use CSS instead", but I can't seem to find a simple way of saying "put a border between cells, but not if the edge of the cell touches the outside of the table" in CSS. Help?

推荐答案

这 http://codepen.io/morewry/pen/GnBFu 尽可能接近我。我怀疑会有一些支持问题并且单元格的对齐方式是 border-spacing 的数量。

This http://codepen.io/morewry/pen/GnBFu is about as close as I can get. I suspect there will be some support issues and the alignment of the cells is off by the amount of the 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 ：

Upon re-reading I realized you weren't looking for separated borders in a single table, but only to suppress the borders except between cells on a nested table. That's much simpler 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优先，所以只有在折叠模型中出现的那些在单元格之间。

Border conflict resolution states that the border-style:hidden takes precedence, so the only ones that appear in the collapsed model are between the cells.

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

The only issue here is that IE doesn't support hidden, so for IE you'd need workarounds. The pseudo-classes ought to work for IE8. I don't think IE7 supported :last-child, so it would need some extra help, and IE6 would need a workaround for both :first-child and :last-child.

对于IE8和IE7，以下将模拟 border：hidden

For IE8 and IE7, the following will simulate border:hidden

table{ border:2px solid transparent; }

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

You'd get 2 extra pixels of transparent space in those browsers, but it's more efficient. IE6, as I recall, doesn't properly support transparent borders, it would still have issues. See http://codepen.io/morewry/pen/bIvJa.

这篇关于我如何模仿“< TABLE RULES>”用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！