blocks|key|929227|text|table+{
++++border-collapse:+collapse;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|929228|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>table {
    border-collapse: collapse;
}
</code></pre>


blocks|key|713232|text|对我来说，我需要做一些类似的事情来完全删除表格和所有单元格的边框。这根本不需要修改HTML，这在我的例子中很有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|713233|table,+tr,+td+{
++++border:+none;
}|code-block|syntax|javascript|713234|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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.</p>

<pre><code>table, tr, td {
    border: none;
}
</code></pre>


blocks|key|713291|text|在bootstrap环境中，排名靠前的答案都没有帮助，但应用以下内容会删除所有边界：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|713292|.noBorder+{
++++border:none+!important;
}|code-block|syntax|javascript|713293|应用为：|713294|<td+class="noBorder">|713295|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>In a bootstrap environment none of the top answers helped, but applying the following removed all borders: </p>

<pre><code>.noBorder {
    border:none !important;
}
</code></pre>

<p>Applied as: </p>

<pre><code>&lt;td class="noBorder"&gt;
</code></pre>


blocks|key|713423|text|在bootstrap环境中，我的解决方案如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|713424|++++<table+style="border-collapse:+collapse;+border:+none;">
++++++++<tr+style="border:+none;">
++++++++++++<td+style="border:+none;">
++++++++++++</td>
++++++++</tr>
++++</table>++++|code-block|syntax|javascript|713425|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>In a bootstrap environment here is my solution:</p>

<pre><code>    &lt;table style="border-collapse: collapse; border: none;"&gt;
        &lt;tr style="border: none;"&gt;
            &lt;td style="border: none;"&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;    
</code></pre>


blocks|key|713352|text|这就是为我解决问题的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|713353|在您的HTML+tr标记中，添加以下内容：|713354|style="border-collapse:+collapse;+border:+none;"|code-block|syntax|javascript|713355|这删除了表格行上显示的所有边框。|713356|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>This is what resolved the problem for me:</p>

<p>In your HTML tr tag, add this: </p>

<pre><code>style="border-collapse: collapse; border: none;"
</code></pre>

<p>That removed all the borders that were showing on the table row.</p>


blocks|key|713523|text|使用TinyMCE编辑器，我能够删除所有边框的唯一方法就是以这样的样式使用border:hidden：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|713524|<style>
table,+tr+{border:hidden;}
td,+th+{border:hidden;}
</style>|code-block|syntax|javascript|713525|在HTML中，如下所示：|713526|<table+style="border:hidden;"</table>|713527|干杯|713528|entityMap^0|11|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<p>Using TinyMCE editor, the only way I was able to remove all borders was to use <code>border:hidden</code> in the style like this:</p>
<pre><code>&lt;style&gt;
table, tr {border:hidden;}
td, th {border:hidden;}
&lt;/style&gt;
</code></pre>
<p>And in the HTML like this:</p>
<pre><code>&lt;table style=&quot;border:hidden;&quot;&lt;/table&gt;
</code></pre>
<p>Cheers</p>


blocks|key|929582|text|在全局Css中使用此CSS样式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|929583|​|929584|.table,
.monthview-datetable+td,
.monthview-datetable+th+{
++border:+none+!important;
}|code-block|syntax|javascript|929585|929586|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<h1>Use this Css style in your global CSS</h1>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.table,
.monthview-datetable td,
.monthview-datetable th {
  border: none !important;
}</code></pre>
</div>
</div>
</p>


blocks|key|929625|text|table+{
+++border:+none;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|929626|您可以使用此css属性隐藏表格边框。|unstyled|929627|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>table {
   border: none;
}
</code></pre>
<p>You can user this css property to hide table border.</p>


blocks|key|713674|text|给定：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|713675|++++<table>
++++++++++++<tr>
++++++++++++++++<th>Company</th>
++++++++++++++++<th>Contact</th>
++++++++++++++++<th>Country</th>
++++++++++++</tr>
++++<table>|code-block|syntax|javascript|713676|在你的CSS上使用它将会起作用：|713677|tr+{+
++++border:+transparent+1px+solid;+
+++}|713678|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Given:</p>
<pre><code>    &lt;table&gt;
            &lt;tr&gt;
                &lt;th&gt;Company&lt;/th&gt;
                &lt;th&gt;Contact&lt;/th&gt;
                &lt;th&gt;Country&lt;/th&gt;
            &lt;/tr&gt;
    &lt;table&gt;
</code></pre>
<p>Using this on your CSS would work:</p>
<pre><code>tr { 
    border: transparent 1px solid; 
   }
            
</code></pre>


blocks|key|713712|text|我发现border-spacing是我的问题|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|713713|+td,+th,+tr,+table+{
++++border:+0+!important;
++++border-spacing:0+!important;
++}|code-block|syntax|javascript|713714|entityMap^0|3|E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>I found <code>border-spacing</code> to be my issue</p>
<pre><code> td, th, tr, table {
    border: 0 !important;
    border-spacing:0 !important;
  }
</code></pre>


<p>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.</p>

<p>This is my code:</p>

<pre><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;td class="bTop" colspan="3"&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td class="bLeft"&gt;
        &lt;/td&gt;
        &lt;td class="middle"&gt;
        &lt;/td&gt;
        &lt;td class="bRight"&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td class="bBottom" colspan="3"&gt;
        &lt;/td&gt;
    &lt;/tr&gt;                                                    
&lt;/table&gt;
</code></pre>

<p>And the CSS classes are the following:</p>

<pre><code>.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');       
}
</code></pre>

<p>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?</p>


How to completely remove borders from HTML table

我的目标是制作一个类似于“相框”的HTML页面。换句话说，我想做一个被4张图片包围的空白页面。这是我的代码：<table>    <tr>        <td class="bTop" colspan="3">        </td>    </tr>    <tr>        <td class="bLeft">        </td>        <td class="middle

问如何完全去除HTML表格中的边框
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何完全去除HTML表格中的边框EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何完全去除HTML表格中的边框
EN