仅显示表行的一部分

Question

有人可以解释如何在html（tr）中向表中添加行 但只有一部分细胞？问题的“难点”是 需求是不可见部分 - （两个空单元格为例）将使用与表格相同的设置 - 相同的BG颜色，但没有边框线

由于

更新 你帮了很多 - 但是：如果我们现在需要那些不可见的细胞将具有一般页面的BG颜色，不是BG BG ，该怎么办？

Answer 1

人们忘记这个名为empty-cells的酷炫财产 使用它！

编辑：我刚刚看到您编辑了包含空单元格背景的图片。在这种情况下，您可以使用:empty选择器从空单元格中删除边框。

使用：空示例：

＆＃13;

＆＃13;

td {
  border : 1px solid black;
  background : green;
}

td:empty {
  border: 0;
}

＆＃13;

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
   <tr>
    <td>1</td>
    <td></td>
    <td></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

初步示例：

＆＃13;

＆＃13;

   body {
  background: blue;
}

td {
  background: white;
  border : 1px solid black;
  empty-cells: hide;
}

＆＃13;

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
   <tr>
    <td>1</td>
    <td></td>
    <td></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要使用border-color选择器或使用JavaScript更改background-color和:empty

更新：使用:empty选择器。感谢@ Paran0a

＆＃13;

＆＃13;

body {
  background-color: #dddddd;
}
table {
  border-collapse: collapse;
  background-color: palegreen;
}
td {
  border: 1px solid black;
  padding: 10px;
}
td:empty {
  border-color: #dddddd;
  background-color: #dddddd;
}

＆＃13;

<table>
  <tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
  </tr>
  <tr>
    <td>21</td>
    <td></td>
    <td></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;