我如何才能在表中应用边界?

我试图弄清楚如何只在表内添加边界。当我这样做的时候:

table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}

边框围绕着整个表格，也在表格单元格之间。我想要实现的是在表格单元格周围只有边框(没有表周围的外部边框)。

下面是我用于表的标记(尽管我认为这并不重要):

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

这里有一些基本的风格，我适用于我的大多数表格:

table {
    border-collapse: collapse;
    border-spacing: 0;
}

当前回答

如果你正在做我相信你正在尝试做的事情，你将需要一些像这样的东西:

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

jsFiddle演示

问题是你在所有单元格周围设置了一个“完整边界”，这使得它看起来好像你在整个表格周围有一个边界。

编辑:关于这些伪类的更多信息可以在quirksmode上找到，并且，正如预期的那样，在IE支持方面，您的表现非常S.O.L.。

2009-08-10 22:05:49

其他回答

这应该可以工作:

table {
 border:0;
}

table td, table th {
    border: 1px solid black;
    border-collapse: collapse;
}

编辑:

我刚试过了，没有桌子边框。但如果我设置了一个表格边界，它就会被边界崩溃消除。

这是testfile:

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
    border-spacing: 0;
}


table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}


</style>
</head>
<body>
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

</body>
</html>

2009-08-10 21:56:40

如果你正在做我相信你正在尝试做的事情，你将需要一些像这样的东西:

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

jsFiddle演示

问题是你在所有单元格周围设置了一个“完整边界”，这使得它看起来好像你在整个表格周围有一个边界。

编辑:关于这些伪类的更多信息可以在quirksmode上找到，并且，正如预期的那样，在IE支持方面，您的表现非常S.O.L.。

2009-08-10 22:05:49

这对我来说很管用:

table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid black;
}

查看示例…

在FF 3.6和Chromium 5.0测试，IE缺乏支持;W3C:

带有“隐藏”的“边界风格”的边界优先于所有其他冲突边界。具有此值的任何边界将抑制该位置的所有边界。

2010-07-28 01:02:34

一个非常简单的方法来达到你想要的效果:

<table border="1" frame="void" rules="all">
    <tr>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
    </tr>
    <tr>
        <td>4444</td>
        <td>5555</td>
        <td>6666</td>
    </tr>
</table>

2011-12-07 10:02:22

为了保持与ie7、ie8的兼容性，我建议使用第一个孩子，而不是最后一个孩子来做到这一点:

table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}

table tr td:first-child{border-left:0;}

table tr:first-child td{border-top:0;}

你可以在以下地方了解CSS 2.1伪类: http://msdn.microsoft.com/en-us/library/cc351024 (VS.85) . aspx

2010-10-05 15:50:21

我如何才能在表中应用边界?

推荐文章

最新文章

标签