Question

是否可以为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/

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

但是我希望将这些行留下颜色，但是所有这些都是一行，没有间隙，没有边框。

可以实现吗？谢谢！

Answer 1

当然，添加border-collapse规则：

table {
    border-collapse:collapse;
}

<强> jsFiddle example

＆＃13;

table {
    border-collapse:collapse;
}

＆＃13;

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

＆＃13;

Answer 2

使用cellspacing

<table width="500px" cellspacing=0>
<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>

请参阅小提琴：fiddle example

Answer 3

是的，您可以使用以下两种方法之一： cellspacing 或 border-collapse ：

table {
 border-collapse:collapse;
}

..或：

<table cellspacing="0">

玩得开心！

Answer 4

使用border-spacing属性并将其设置为0，以便删除间隙。

table {
  border-spacing: 0;   
}

<强>演示：

table {
  border-spacing: 0
}

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

在没有边框

4 个答案: