CSS - 边框仅在表内(CSS - Border only inside the table)

我试图找出如何添加边框仅在表内。当我做：

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;
}

Answer 1:

如果你正在做的，我相信你正在尝试做的，你需要更多的东西像这样的小：

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演示

问题是，你是设置一个“完整的边框”周围所有的细胞，这使得它看起来好像你有围绕整个表格的边框。

干杯。

编辑：这些伪类多一点的信息上可以找到怪异模式，正如所预期的，你是非常SOL中的IE浏览器支持方面。

Answer 2:

这对我的作品：

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

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

查看示例...

测试在FF 3.6和5.0铬，IE缺乏支持; 来自W3C ：

与“隐藏”的“边界式”边框优先于所有其他冲突的边框。这个值的任何边界抑制所有的边界在这个位置。

Answer 3:

为您达到理想的效果非常简单的方法例如：

<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>

Answer 4:

由于十个分量与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

Answer 5:

对于普通表格标记，下面是在所有设备上工作/浏览器上BrowserStack，除了IE 7及以下短的解决方案：

table { border-collapse: collapse; }

td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }

对于IE 7支持，补充一点：

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

一个测试用例可以在这里看到： http://codepen.io/dalgard/pen/wmcdE

Answer 6:

这应该工作：

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>

Answer 7:

将做这一切没有CSS <TABLE BORDER=1 RULES=ALL FRAME=VOID>

代码： HTML代码教程

Answer 8:

边框添加到这个每个单元：

table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }

从第一行中的所有单元格中删除顶部边框：

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

从第一列的单元格中取出左边框：

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

从最后一列的单元格中删除右边框：

table > tbody > tr > td:last-child { border-right: 0; }

从最后一排的电池卸下底部边框：

table > tbody > tr:last-child > td { border-bottom: 0; }

http://jsfiddle.net/hzru0ytx/

文章来源: CSS - Border only inside the table