如何从HTML表格中完全删除边框
我的目标是制作一个类似于“相框”的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指出，这个解决scheme是正式弃用（仍然工作虽然），所以如果你是从头开始，你应该去与jnpcl的边界崩溃的解决scheme。
到目前为止，我实际上很不喜欢这种改变（不经常使用表格）。 它使一些任务有点复杂。 例如，当你想在同一个地方包括两个不同的边界（可视化），一个是一个TOP，另一个是其他行的BOTTOM。 他们将崩溃（=只显示其中一个）。 那么你必须研究如何计算边界的“优先级”，以及边框样式是“更强”（双重还是实体等）。
我这样做：
<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;}
现在，随着边界崩溃，这将不会工作，因为总是有一个边界被删除。 我必须以其他方式来做（有更多的解决scheme）。 一种可能性是使用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>
也可以只用一个边框来使用“凹凸”的边框样式。 但对我而言，这并不是最佳的，因为我无法控制这两种颜色。
也许有一些简单而好的解决scheme来折叠边界，但我还没有看到它，我真的没有花太多时间在它上面。 也许这里有人可以向我展示我们;）
table { border-collapse: collapse; } /* remove padding */ td, th { padding: 0; }
在引导环境中，没有一个最佳答案有帮助，但应用以下方法删除了所有边界：
.noBorder { border:none !important; }
应用为：
<td class="noBorder">
对我来说，我需要做这样的事情，从表格和所有单元格中完全删除边框。 这根本不需要修改HTML，这对我有帮助。
table, tr, td { border: none; }
这是为我解决了这个问题：
在你的HTML tr标签中添加这个：
style="border-collapse: collapse; border: none;"
这删除了表格行中显示的所有边框。
在一个引导环境下，我的解决scheme是：
<table style="border-collapse: collapse; border: none;"> <tr style="border: none;"> <td style="border: none;"> </td> </tr> </table>
