如何从 HTML 表格中完全删除边框

Posted 2023-03-05

【中文标题】如何从 HTML 表格中完全删除边框

【英文标题】：How to completely remove borders from HTML table

【发布时间】：2011-08-06 17:59:02

【问题描述】：

我的目标是制作一个类似于“相框”的 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');       

我的问题是表格的单元格之间出现细白线，我的意思是图片的边框不连续。如何避免这些空白？

【参考方案1】：

<table cellspacing="0" cellpadding="0">

在 css 中：

table border: none;

编辑： 正如 iGEL 所指出的，此解决方案已被正式弃用（尽管仍然有效），因此如果您从头开始，您应该使用 jnpcl 的边框折叠解决方案。

到目前为止，我实际上非常不喜欢这种变化（不要经常使用表格）。它使一些任务变得更加复杂。例如。当您想在同一位置（视觉上）包含两个不同的边框时，一个是 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;

现在，随着边框折叠，这将不起作用，因为总是移除一个边框。我必须以其他方式来做（有更多的解决方案）。一种可能性是使用带有 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”的边框样式，只有一个边框。但对我来说，这不是最佳选择，因为我无法控制两种颜色。

也许有一些简单而不错的折叠边界的解决方案，但我还没有看到它，老实说我没有花太多时间在它上面。也许这里有人可以给我/我们看;)

【讨论】：

cellspacing & cellpadding 自 1999 年以来已被弃用，请参阅 developer.mozilla.org/en-US/docs/HTML/Element/table - 您应该使用 @jnpcl 解决方案。

iGEL 是对的，我已经编辑了我的答案。老实说，我很惊讶，它被弃用了这么长时间，而我仍在使用它而没有任何问题:)

【参考方案2】：

table 
    border-collapse: collapse;

【参考方案3】：

对我来说，我需要做这样的事情来完全删除表格和所有单元格的边框。这根本不需要修改 HTML，这对我来说很有帮助。

table, tr, td 
    border: none;

【讨论】：

尝试了所有的建议直到这里，最后border: none 应用到td 说服了jekyll 制作一个无边框的表格：<td markdown="span" style="padding: 0.5vw; border: none; max-width:100%; max-height:10%; background: transparent;">

【参考方案4】：

在引导环境中，最重要的答案都没有帮助，但应用以下内容删除了所有边框：

.noBorder 
    border:none !important;

申请为：

<td class="noBorder">

【讨论】：

这个建议在 Wordpress 中对我有用。我很难让边界不被强制执行。

【参考方案5】：

在引导环境中，这是我的解决方案：

    <table style="border-collapse: collapse; border: none;">
        <tr style="border: none;">
            <td style="border: none;">
            </td>
        </tr>
    </table>    

【参考方案6】：

这就是为我解决问题的方法：

在您的 HTML tr 标签中，添加以下内容：

style="border-collapse: collapse; border: none;"

这删除了表格行上显示的所有边框。

【参考方案7】：

使用 TinyMCE 编辑器，我能够删除所有边框的唯一方法是使用 border:hidden 的样式，如下所示：

<style>
table, tr border:hidden;
td, th border:hidden;
</style>

在 HTML 中是这样的：

<table style="border:hidden;"</table>

干杯

【参考方案8】：

在您的全局 CSS 中使用这种 Css 样式

.table,
.monthview-datetable td,
.monthview-datetable th 
  border: none !important;

【参考方案9】：

table 
   border: none;

您可以使用这个 css 属性来隐藏表格边框。

【参考方案10】：

给定：

    <table>
            <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Country</th>
            </tr>
    <table>

在你的 CSS 上使用它会起作用：

tr  
    border: transparent 1px solid; 
   
            

【参考方案11】：

我发现border-spacing 是我的问题

 td, th, tr, table 
    border: 0 !important;
    border-spacing:0 !important;