html - 一种在 html 中将表格单元格组合在一起的方法？

Question

所以这很简单。我需要一种将单元格组合在一起的方法。像<div>或 <span>但他们都没有工作。 <tbody>似乎是一个很好的解决方案，但它只适用于表格行。帮助!

Answer 1

如果您正在寻找一种方法将一行中的 2 个或多个单元格与其他“常规”单元格一起合并到一个单元格中(就像您希望的那样在 google|excel 电子表格中以类似于此的方式执行:

然后您可以为 td 元素使用 colspan 属性，指示您合并的单元格数量:

<tr>
  <td colspan=2> Merged Cell occupying 2 columns </td>
</tr>
<tr>
  <td> Regular cell </td>
  <td> Another cell in same row </td>
</tr>

此外，您可以在 css 中使用 td[colspan] 选择器(结合您选择的任何父级选择器)来引用这些合并的单元格。

这是一个工作示例:

/* Style for cells with any colspan attribute */
td[colspan] {
  text-align: center;
}

/* No extra space between cells */
table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid gray;
  margin: 0;
  padding: 3px 10px;
  text-align: right;
}

<table>
  <tr>
    <th>Day</th>
    <th>Invoice</th>
    <th>Total</th>
  </tr>
  <tr>
    <!-- this cell will occupy 3 columns -->
    <td colspan=3>January</td>
  </tr>
  <tr>
    <td>2</td>
    <td>0348</td>
    <td>248.35</td>
  </tr>
  <tr>
    <td>7</td>
    <td>0349</td>
    <td>126.14</td>
  </tr>
  <tr>
    <td>18</td>
    <td>0350</td>
    <td>821.99</td>
  </tr>
  <tr>
    <td colspan=3>February</td>
  </tr>
  <tr>
    <td>27</td>
    <td>0351</td>
    <td>643.50</td>
  </tr> 
</table>