我怎样才能模拟“”？与CSS？

Question

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

“外部”表的单元格周围有边框。我希望我的“内部”表格的单元格之间有边框，这样我最终会得到“拆分”现有（“外部”）单元格的效果。

如果它让事情变得更清楚，这就是我正在拍摄的，作为（可怜的）ascii 艺术：（

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

“内部”表格看起来像井字游戏网格；“外部”表格的单元格具有不间断的边框）

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

Answer 1

这个 http://codepen.io/morewry/pen/GnBFu 是我能想到的最接近的得到。我怀疑会存在一些支持问题，并且单元格的对齐会因边框间距的量而偏离。

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 行开始。

Answer 3

简单示例：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 学校：http://www.w3schools.com/css/css_pseudo_classes.asp

不使用伪选择器：

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

Answer 4

HTML5 规范在其“渲染”部分中有 CSS 规则 /a>“。只需选择您要查找的 rule 值并获取相应的 CSS。让我复制并粘贴 的规则：

注意：属性选择器中的“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;
}