Ric*_*nop 187 html css xhtml html-table border
我试图弄清楚如何只在表格内添加边框.当我做:
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;
}
the*_*eIV 198
如果你正在做我认为你想做的事情,你需要更多这样的东西:
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;
}
问题是你在所有单元格周围设置了一个"全边框",这使得它看起来好像你在整个表格周围有一个边框.
干杯.
编辑:关于那些伪类的更多信息可以在quirksmode上找到,并且,正如预期的那样,就IE支持而言,你几乎是SOL.
ant*_*ger 187
这对我有用:
table {
border-collapse: collapse;
border-style: hidden;
}
table td, table th {
border: 1px solid black;
}
在FF 3.6和Chromium 5.0测试中,IE缺乏支持; 来自W3C:
具有"隐藏"边界风格的边界优先于所有其他冲突边界.具有此值的任何边框都会抑制此位置的所有边框.
jon*_*ony 40
您可以通过一种非常简单的方式获得所需效果的示例:
<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>
Cri*_*oot 11
由于mantain与ie7的兼容性,ie8我建议使用first-child而不是last-child来做到这一点:
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 Pseudo-classes:http: //msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
dal*_*ard 10
对于普通的表格标记,这是一个简短的解决方案,适用于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
这应该工作:
table {
border:0;
}
table td, table th {
border: 1px solid black;
border-collapse: collapse;
}
编辑:
我刚尝试过,没有桌边.但如果我设置一个表格边框,它将被边框折叠消除.
这是测试文件:
<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>