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

Question

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

我的问题是我在桌子的细胞之间得到细白线，我的意思是图片的边框不连续。我怎样才能避免这些空白？

Answer 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”边框样式，只有一个边框。但对我来说，这不是最佳选择，因为我无法控制这两种颜色。

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

Answer 2

table {
    border-collapse: collapse;
}

Answer 3

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

table, tr, td {
    border: none;
}

Answer 4

在引导程序环境中，没有一个顶级答案有帮助，但应用以下内容删除了所有边框：

.noBorder {
    border:none !important;
}

应用为：

<td class="noBorder">

Answer 5

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

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

Answer 6

这就解决了我的问题：

在HTML tr标记中，添加以下内容：

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

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

Answer 7

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

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

在这样的HTML中：

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

欢呼

Answer 8

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

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

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

8 个答案:

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