Html 如何仅在表格内应用边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1257430/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I apply a border only inside a table?
提问by Richard Knop
I am trying to figure out how to add border only inside the table. When I do:
我想弄清楚如何只在表格内添加边框。当我做：
table {
border: 0;
}
table td, table th {
border: 1px solid black;
}
The border is around the whole table and also between table cells. What I want to achieve is to have border only inside the table around table cells (without outer border around the table).
边框围绕整个表格以及表格单元格之间。我想要实现的是仅在表格单元格周围的表格内设置边框（表格周围没有外边框）。
Here is markup I'm using for tables (even though I think that is not important):
这是我用于表格的标记（尽管我认为这并不重要）：
<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>
And here are some basic styles I apply to most of my tables:
以下是我应用于大多数表格的一些基本样式：
table {
border-collapse: collapse;
border-spacing: 0;
}
回答by theIV
If you are doing what I believe you are trying to do, you'll need something a little more like this:
如果您正在做我认为您正在尝试做的事情，那么您将需要更多这样的东西：
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;
}
The problem is that you are setting a 'full border' around all the cells, which make it appear as if you have a border around the entire table.
问题是您在所有单元格周围设置了“完整边框”，这使它看起来好像整个表格周围都有边框。
Cheers.
干杯。
EDIT: A little more info on those pseudo-classes can be found on quirksmode, and, as to be expected, you are pretty much S.O.L. in terms of IE support.
编辑：关于这些伪类的更多信息可以在quirksmode上找到，并且正如预期的那样，您在 IE 支持方面几乎是 SOL。
回答by anthonyrisinger
this works for me:
这对我有用：
table {
border-collapse: collapse;
border-style: hidden;
}
table td, table th {
border: 1px solid black;
}
tested in FF 3.6 and Chromium 5.0, IE lacks support; from W3C:
在 FF 3.6 和 Chromium 5.0 中测试，IE 缺乏支持；来自W3C：
Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.
具有“隐藏”的“边界样式”的边界优先于所有其他冲突边界。具有此值的任何边框都会抑制此位置的所有边框。
回答by jony
Example of a very simpleway for you to achieve the desired effect:
一个非常简单的方法让你达到预期效果的例子：
<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>
回答by Crisboot
Due to mantain compatibility with ie7, ie8 I suggest using first-child and not last-child to doing this:
由于与 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;}
You can learn about CSS 2.1 Pseudo-classes at: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
您可以在以下位置了解 CSS 2.1 伪类：http: //msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
回答by dalgard
For ordinary table markup, here's a short solution that works on all devices/browsers on BrowserStack, except IE 7 and below:
对于普通表格标记，这里有一个简短的解决方案，适用于 BrowserStack 上的所有设备/浏览器，IE 7 及以下版本除外：
table { border-collapse: collapse; }
td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }
For IE 7 support, add this:
对于 IE 7 支持，添加以下内容：
tr + tr > td,
tr + tr > th { border-top: 1px solid; }
A test case can be seen here: http://codepen.io/dalgard/pen/wmcdE
可以在这里看到一个测试用例：http: //codepen.io/dalgard/pen/wmcdE
回答by Rufinus
this should work:
这应该有效：
table {
border:0;
}
table td, table th {
border: 1px solid black;
border-collapse: collapse;
}
edit:
编辑：
i just tried it, no table border. but if i set a table border it is eliminated by the border-collapse.
我刚试过，没有表格边框。但是如果我设置了一个表格边框，它会被边框折叠消除。
this is the 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>
回答by TwoFaceZ
that will do it all without css
<TABLE BORDER=1 RULES=ALL FRAME=VOID>
这将在没有 css 的情况下完成
<TABLE BORDER=1 RULES=ALL FRAME=VOID>
code from: HTML CODE TUTORIAL
代码来自：HTML 代码教程
回答by Brian
Add the border to each cell with this:
使用此将边框添加到每个单元格：
table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }
Remove the top border from all the cells in the first row:
从第一行中的所有单元格中删除顶部边框：
table > tbody > tr:first-child > td { border-top: 0; }
Remove the left border from the cells in the first column:
从第一列中的单元格中删除左边框：
table > tbody > tr > td:first-child { border-left: 0; }
Remove the right border from the cells in the last column:
从最后一列中的单元格中删除右边框：
table > tbody > tr > td:last-child { border-right: 0; }
Remove the bottom border from the cells in the last row:
从最后一行中的单元格中删除底部边框：
table > tbody > tr:last-child > td { border-bottom: 0; }
回答by user1119279
Works for any combination of tbody/thead/tfoot and td/th
适用于 tbody/thead/tfoot 和 td/th 的任意组合
table.inner-border {
border-collapse: collapse;
border-spacing: 0;
}
table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
border-bottom: 1px solid black;
border-right: 1px solid black;
}
table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
border-right: 0;
}
table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
border-bottom: 0;
}<table class="inner-border">
<thead>
<tr>
<th>head1,1</th>
<td>head1,2</td>
<td>head1,3</td>
</tr>
<tr>
<td>head2,1</td>
<td>head2,2</td>
<th>head2,3</th>
</tr>
</thead>
<tr>
<td>1,1</td>
<th>1,2</th>
<td>1,3</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
</tr>
<thead>
<tr>
<th>foot1,1</th>
<td>foot1,2</td>
<td>foot1,3</td>
</tr>
<tr>
<td>foot2,1</td>
<th>foot2,2</th>
<th>foot2,3</th>
</tr>
</thead>
</table>