我的目标是制作一个类似于“相框”的HTML页面。换句话说，我想制作一个被4张图片包围的空白页面。
这是我的代码：
<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>
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');
}
我的问题是表格单元格之间出现细白线，我的意思是图片的边框不连续。我怎样才能避免这些空白？
<table cellspacing="0" cellpadding="0">
在CSS中：
table {border: none;}
编辑： 正如 iGEL 指出的，该解决方案已被正式弃用（尽管仍然有效），因此如果您从头开始，则应该使用 jnpcl 的边框折叠解决方案。
到目前为止，我实际上非常不喜欢这种更改（不经常使用表格）。它使某些任务变得更加复杂。例如。当您想在同一位置（视觉上）包含两个不同的边框时，其中一个是一行的顶部，第二个是另一行的底部。它们将折叠（= 仅显示其中之一）。然后你必须研究边框的“优先级”是如何计算的以及哪些边框样式“更强”（双边框与实心边框等）。
我确实喜欢这样：
<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;}
现在，随着边框折叠，这将不起作用，因为总是有一个边框被删除。我必须以其他方式做到这一点（有更多的解决方案）。一种可能性是使用带有 box-shadow 的 CSS3：
<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>
您还可以使用类似“groove|ridge|inset|outset”的边框样式，只有一个边框。但对我来说，这不是最佳选择，因为我无法控制两种颜色。
也许有一些简单而不错的折叠边框解决方案，但我还没有看到它，而且老实说我没有花太多时间在上面。也许这里有人可以向我/我们展示;)
table {
border-collapse: collapse;
}
对我来说，我需要做这样的事情来完全删除表格和所有单元格的边框。这根本不需要修改 HTML，这对我的情况很有帮助。
table, tr, td {
border: none;
}
在引导环境中，最重要的答案都没有帮助，但应用以下内容删除了所有边框：
.noBorder {
border:none !important;
}
应用为：
<td class="noBorder">
在引导环境中，这是我的解决方案：
<table style="border-collapse: collapse; border: none;">
<tr style="border: none;">
<td style="border: none;">
</td>
</tr>
</table>
这就是为我解决问题的方法：
在您的 HTML tr 标记中，添加以下内容：
style="border-collapse: collapse; border: none;"
这删除了表格行上显示的所有边框。
使用 TinyMCE 编辑器，我能够删除所有边框的唯一方法是在如下样式中使用
border:hidden<style>
table, tr {border:hidden;}
td, th {border:hidden;}
</style>
在 HTML 中是这样的：
<table style="border:hidden;"</table>
干杯
这里的所有答案在 2022 年都不起作用（至少对于 Chrome 来说），除了
<table cellspacing="0" cellpadding="0">table,
thead,
tbody,
tfoot,
tr,
th,
td {
padding: 0;
border-spacing: 0;
}
paddingcellpaddingborder-spacingcellspacing.table,
.monthview-datetable td,
.monthview-datetable th {
border: none !important;
}鉴于：
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<table>
在你的 CSS 上使用它会起作用：
tr {
border: transparent 1px solid;
}
我发现
border-spacing td, th, tr, table {
border: 0 !important;
border-spacing:0 !important;
}
table {
border: none;
}
您可以使用此 css 属性来隐藏表格边框。
这解决了我的 th,td 周围微小边框的问题（=背景表的颜色）。设置盒子阴影的颜色：1px 1px 1px #003366;与背景颜色相同。在 Edge、Chrome 和 Firefox 中尝试过！
table {
padding: 0;
border-collapse: collapse;
border: none;
}
th {
background-color: #003366;
color: white;
text-align: center;
box-shadow: 1px 1px 1px #003366;
}