在没有边框的表格中对整行进行着色 [英] Color entire rows in a table without a border

问题描述

是否可以在HTML表格中对整行进行着色，而不会出现断开或边框缺口？

到目前为止，我有这张表： p>

 < table width =500px> 
< tr bgcolor =pink> 
< td> Nombre博客< / td> 
< td> Autora< / td> 
< td> Idioma< / td> 
< / tr> 
< tr> 
< td>金发沙拉< / td> 
< td> Chiara Ferragni< / td> 
< td> Italiano< / td> 
< / tr> 
< tr bgcolor =mistyrose> 
< td> The Pioneer Woman< / td> 
< td> Ree Drummond< / td> 
< td>英语< / td> 
< / tr> 
< tr> 
< td> La Tartine Gourmande< / td> 
< td>BéatricePeltre< / td> 
< td>Francés< / td> 
< / tr> 
< tr bgcolor =mistyrose> 
< td> Objetivo Cupcake Perfecto< / td> 
< td> AlmaObregón< / td> 
< td>Español< / td> 
< / tr> 
< / table> 
  

您可以在这个小提琴中看到： http://jsfiddle.net/ncsmzmch/

正如您所看到的，列之间存在白色差距。如果我放置一个边框甚至是一个折叠的边框，那么这个缝隙显然会消失，导致它被线条（边框）填满。

但是我想留下有颜色的行，但都在一行中，没有空白，也没有边框。

这可以实现吗？谢谢！

解决方案

当然，请添加 border-collapse 规则：

 表格{
边界崩溃：崩溃; 
} 
  

jsFiddle示例

< }

< table width =500px> < tr bgcolor =pink> < td> Nombre博客< / td> < TD> Autora< / TD> < TD>语< / TD> < / TR> < TR> < td>金发沙拉< / td> < td> Chiara Ferragni< / td> < TD>意大利语< / TD> < / TR> < tr bgcolor =mistyrose> < td> The Pioneer Woman< / td> < td> Ree Drummond< / td> < TD>英语< / TD> < / TR> < TR> < td> La Tartine Gourmande< / td> < td>BéatricePeltre< / td> < TD>&八方资源LT; / TD> < / TR> < tr bgcolor =mistyrose> < td> Objetivo Cupcake Perfecto< / td> < td> AlmaObregón< / td> < TD>西班牙语< / TD> < / table>

is it possible to color entire rows in an html table without being a "break" or gap for the border?

So far I have this table:

<table width="500px">
    <tr bgcolor="pink">
        <td>Nombre blog</td>
        <td>Autora</td>
        <td>Idioma</td>
    </tr>
    <tr>
        <td>The Blonde Salad</td>
        <td>Chiara Ferragni</td>
        <td>Italiano</td>
    </tr>
     <tr bgcolor="mistyrose">
       <td>The Pioneer Woman</td>
        <td>Ree Drummond</td>
        <td>Inglés</td>
    </tr>
    <tr>
       <td>La Tartine Gourmande</td>
        <td>Béatrice Peltre</td>
        <td>Francés</td>
    </tr>
    <tr bgcolor="mistyrose">
       <td>Objetivo Cupcake Perfecto</td>
        <td>Alma Obregón</td>
        <td>Español</td>
    </tr>
</table>

That you can see in this fiddle: http://jsfiddle.net/ncsmzmch/

As you can see there is a white gap between columns. If I put a border or even a collapsed border, that gap obviously dissapears, cause it's filled by the line (border).

But I want to leave the rows colored, but all in one line, without the gaps, and no borders.

Can that be achieved? Thanks!

解决方案

Sure, add a border-collapse rule:

table {
    border-collapse:collapse;
}

jsFiddle example

table {
    border-collapse:collapse;
}

<table width="500px">
    <tr bgcolor="pink">
        <td>Nombre blog</td>
        <td>Autora</td>
        <td>Idioma</td>
    </tr>
    <tr>
        <td>The Blonde Salad</td>
        <td>Chiara Ferragni</td>
        <td>Italiano</td>
    </tr>
    <tr bgcolor="mistyrose">
        <td>The Pioneer Woman</td>
        <td>Ree Drummond</td>
        <td>Inglés</td>
    </tr>
    <tr>
        <td>La Tartine Gourmande</td>
        <td>Béatrice Peltre</td>
        <td>Francés</td>
    </tr>
    <tr bgcolor="mistyrose">
        <td>Objetivo Cupcake Perfecto</td>
        <td>Alma Obregón</td>
        <td>Español</td>
    </tr>
</table>

这篇关于在没有边框的表格中对整行进行着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！