Html 如何使用 CSS 模拟“<TABLE RULES>”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5887382/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I emulate "<TABLE RULES>" with CSS?
提问by Coderer
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.
我正在使用 ExtJS 编写一个 Web 应用程序。我将一张桌子放在一张桌子里面，由于各种原因，不可能将它全部重构为一个带有 rowspan/colspan 等的大桌子。
The "outside" table has borders around its cells. I'd like my "inside" table to have borders betweenits cells, so that I wind up with the effect of "splitting" the existing ("outside") cell.
“外部”表格的单元格周围有边框。我希望我的“内部”表格在其单元格之间有边界，这样我就可以“拆分”现有（“外部”）单元格的效果。
If it makes things clearer, this is what I'm shooting for, as (poor) ascii art:
如果它使事情更清楚，这就是我的目标，作为（糟糕的）ascii 艺术：
-----------------
| |
| | | |
| ----------- |
| | | |
| ----------- |
| | | |
| |
-----------------
(The "inner" table looks like a tic-tac-toe grid; the "outer" table's cell has an unbroken border)
（“内部”表格看起来像井字游戏网格；“外部”表格的单元格有一个完整的边框）
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?
我环顾四周，发现了一个<table>名为的属性RULES，听起来它就是这样做的。但是，它似乎没有得到很好的支持，无论如何我不应该在标记中添加样式（对吧？）。我找到的文档说“改用 CSS”，但我似乎找不到一种简单的方法来说明“在单元格之间设置边框，但如果单元格的边缘接触表格的外部，则不会”在 CSS 中. 帮助？
回答by morewry
This http://codepen.io/morewry/pen/GnBFuis 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
这个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; }
Edit
编辑
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:
重新阅读后，我意识到您不是在单个表格中寻找单独的边框，而只是为了抑制嵌套表格上单元格之间的边框。这要简单得多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 conflict resolution states that the border-style:hidden takes precedence, so the only ones that appear in the collapsed model are between the cells.
边界冲突解决方案指出 border-style:hidden 优先，因此折叠模型中唯一出现的是单元格之间。
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.
这里唯一的问题是 IE 不支持隐藏，因此对于 IE，您需要解决方法。伪类应该适用于 IE8。我认为 IE7 不支持 :last-child，因此需要一些额外的帮助，而 IE6 需要针对 :first-child 和 :last-child 的解决方法。
For IE8 and IE7, the following will simulate border:hidden
对于IE8和IE7，下面将模拟 border:hidden
table{ border:2px solid transparent; }
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.
在这些浏览器中，您会获得 2 个额外像素的透明空间，但效率更高。我记得，IE6 不能正确支持透明边框，它仍然会出现问题。请参阅http://codepen.io/morewry/pen/bIvJa。
回答by Boris Zbarsky
You could lift Mozilla's implementation of the rulesattribute, which is entirely in CSS:
你可以解除 Mozilla 对rules属性的实现，它完全在 CSS 中：
http://hg.mozilla.org/mozilla-central/file/3fd770ef6a65/layout/style/html.css#l289and http://hg.mozilla.org/mozilla-central/file/3fd770ef6a65/layout/style/html.css#l337are the styles, going on through line 410.
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 行开始。
回答by cwharris
Simple Example: http://jsfiddle.net/xixionia/v3eVq/
简单示例：http: //jsfiddle.net/xixionia/v3eVq/
Simple Table(albiet without tbody):
简单表（albiet 没有 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>
Simple CSS(albiet not completely compatible with all browsers):
简单的 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;
}
Psuedo-selector reference on W3 Schools: http://www.w3schools.com/css/css_pseudo_classes.asp
W3 Schools 上的伪选择器参考：http: //www.w3schools.com/css/css_pseudo_classes.asp
Instead of using psuedo-selectors:
而不是使用伪选择器：
You can set a class for each first-child and last-child, and use that class as your selector.
您可以为每个第一个孩子和最后一个孩子设置一个类，并将该类用作您的选择器。
回答by Robert Siemer
The HTML5 spec has CSS rulesin it's section “Rendering“. Just pick the rulevalue you're looking for and fetch the corresponding CSS. Let me copy and paste the rules for <table rules=...>:
HTML5 规范在“渲染”部分有 CSS 规则。只需选择rule您要查找的值并获取相应的 CSS。让我复制并粘贴以下规则<table rules=...>：
Note: the "i" in the attribute selector is CSS4 and ignores case. I.e. rules=ROWSis as good as rules=rows.
注意：属性选择器中的“i”是 CSS4，忽略大小写。即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;
}
