html – 在没有边框的表中为整行着色

是否可以为html表中的整行着色而不是边界的“中断”或间隙？

到目前为止我有这张桌子：

<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>

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

如您所见,列之间存在白色间隙.如果我放置边框甚至是折叠的边框,那个间隙显然会消失,导致它被线条(边界)填充.

但是我想让行保持颜色,但是所有行都是一行,没有间隙,没有边框.

可以实现吗？谢谢！

解决方法

当然,添加一个 border-collapse规则：

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>

原文链接：https://www.f2er.com/html/226628.html

html – 在没有边框的表中为整行着色

解决方法

猜你在找的HTML相关文章