Question

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

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

如果它让事情更清楚，那就是我正在拍摄的，因为（可怜的）ascii art：

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

（“内部”表格看起来像一个井字网格;“外部”表格的单元格具有完整的边界）

我环顾四周，找到了一个名为<table>的{{1}}属性，听起来就是这样。但是，它似乎得不到很好的支持，无论如何我不应该把风格放在标记中（对吧？）。我发现的文档说“使用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行。

Answer 3

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

简单表（没有tbody的albiet）：

<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 （albiet与所有浏览器不完全兼容）：

/* 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学校的Psuedo-selector参考：http://www.w3schools.com/css/css_pseudo_classes.asp

而不是使用伪选择器：

您可以为每个first-child和last-child设置一个类，并将该类用作选择器。

Answer 4

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

注意：＆＃34; i＆＃34;在属性选择器中是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;
}

如何用CSS模拟“”？<table rules =“”> </table>

4 个答案: