如何从 HTML 表格中完全删除边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5684144/
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 to completely remove borders from HTML table
提问by yazanpro
My goal is to make an HTML page that is similar to a "photo frame". In other words, I want to make a blank page that is surrounded by 4 pictures.
我的目标是制作一个类似于“相框”的 HTML 页面。换句话说，我想制作一个由 4 张图片包围的空白页面。
This is my code:
这是我的代码：
<table>
<tr>
<td class="bTop" colspan="3">
</td>
</tr>
<tr>
<td class="bLeft">
</td>
<td class="middle">
</td>
<td class="bRight">
</td>
</tr>
<tr>
<td class="bBottom" colspan="3">
</td>
</tr>
</table>
And the CSS classes are the following:
CSS类如下：
.bTop
{
width: 960px;
height: 111px;
background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
width: 212px;
height: 280px;
background-image: url('../Images/BackLeft.jpg');
}
.middle
{
width: 536px;
height: 280px;
}
.bRight
{
width: 212px;
height: 280px;
background-image: url('../Images/BackRight.jpg');
}
.bBottom
{
width: 960px;
height: 111px;
background-image: url('../Images/BackBottom.jpg');
}
My problem is that I am getting thin white lines between the cells of the table, I mean that the border of pictures is not continuous. How can I avoid these white spaces?
我的问题是表格单元格之间出现细白线，我的意思是图片的边框不连续。我怎样才能避免这些空白？
回答by Damb
<table cellspacing="0" cellpadding="0">
And in css:
在 css 中：
table {border: none;}
EDIT:As iGEL noted, this solution is officially deprecated (still works though), so if you are starting from scratch, you should go with the jnpcl's border-collapse solution.
编辑：正如 iGEL 所指出的，此解决方案已正式弃用（尽管仍然有效），因此如果您是从头开始，则应使用 jnpcl 的边框折叠解决方案。
I actually quite dislike this change so far (don't work with tables that often). It makes some tasks bit more complicated. E.g. when you want to include two different borders in same place (visually), while one being TOP for one row, and second being BOTTOM for other row. They will collapse (= only one of them will be shown). Then you have to study how is border's "priority" calculated and what border styles are "stronger" (double vs. solid etc.).
到目前为止，我实际上非常不喜欢这种更改（不要经常使用表格）。它使某些任务变得更加复杂。例如，当您想在同一位置（视觉上）包含两个不同的边框时，一个是 TOP 用于一行，第二个是 BOTTOM 用于另一行。它们会崩溃（= 只显示其中之一）。然后，您必须研究边框的“优先级”是如何计算的，以及哪些边框样式“更强”（双与实等）。
I did like this:
我是这样的：
<table cellspacing="0" cellpadding="0">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
----------
.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}
Now, with border collapse, this won't work as there is always one border removed. I have to do it in some other way (there are more solutions ofc). One possibility is using CSS3 with box-shadow:
现在，随着边框折叠，这将不起作用，因为总是删除一个边框。我必须以其他方式来做（有更多的解决方案）。一种可能性是将 CSS3 与 box-shadow 结合使用：
<table class="tab">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>???
<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}?
</style>
You could also use something like "groove|ridge|inset|outset" border style with just a single border. But for me, this is not optimal, because I can't control both colors.
你也可以使用类似“groove|ridge|inset|outset”的边框样式，只有一个边框。但对我来说，这不是最佳选择，因为我无法控制两种颜色。
Maybe there is some simple and nice solution for collapsing borders, but I haven't seen it yet and I honestly haven't spent much time on it. Maybe someone here will be able to show me/us ;)
也许有一些简单而不错的折叠边框解决方案，但我还没有看到它，老实说我没有花太多时间在上面。也许这里有人可以向我/我们展示;)
回答by drudge
table {
border-collapse: collapse;
}
回答by sean.boyer
For me I needed to do something like this to completely remove the borders from the table and all cells. This does not require modifying the HTML at all, which was helpful in my case.
对我来说，我需要做这样的事情才能从表格和所有单元格中完全删除边框。这根本不需要修改 HTML，这对我来说很有帮助。
table, tr, td {
border: none;
}
回答by Stephan
In a bootstrap environment none of the top answers helped, but applying the following removed all borders:
在引导环境中，没有一个最佳答案有帮助，但应用以下删除了所有边框：
.noBorder {
border:none !important;
}
Applied as:
应用为：
<td class="noBorder">
回答by KLMN
In a bootstrap environment here is my solution:
在引导环境中，这是我的解决方案：
<table style="border-collapse: collapse; border: none;">
<tr style="border: none;">
<td style="border: none;">
</td>
</tr>
</table>
回答by Khozanai
This is what resolved the problem for me:
这就是为我解决问题的原因：
In your HTML tr tag, add this:
在您的 HTML tr 标记中，添加以下内容：
style="border-collapse: collapse; border: none;"
That removed all the borders that were showing on the table row.
这删除了表格行上显示的所有边框。
