table单元格边框合并

在HTML中，table元素是用于创建表格的最基本标签，而每一个表格都由行和列组成。为使表格更美观、易读，我们通常需要合并单元格的边框。

合并单元格边框

合并行边框

为了合并单元格的边框，我们可以设置单元格边框的属性border-collapse。具体实现方法如下：

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}
td[rowspan="2"] {
  border-bottom: none;  // 不显示下边框
}
</style>

<table>
  <tr>
    <td rowspan="2">1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td colspan="2">10 11</td>
  </tr>
</table>

在上述代码中，我们设置了合并单元格的行边框，其中rowspan用于合并单元格并将它们的行跨度设置为2。另一方面，设置单元格为colspan，可以将单元格的列跨度合并，如上述代码的最后一行所示。

合并列边框

合并列的边框与合并行的边框实现方法是类似的，如下所示：

<style>
td[colspan="2"] {
  border-right: none;  // 不显示右边框
}
</style>

<table>
  <tr>
    <td rowspan="2">1</td>
    <td>2</td>
    <td colspan="2">3 4</td>
  </tr>
  <tr>
    <td rowspan="2">6</td>
    <td>5</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
  <tr>
    <td>10</td>
    <td colspan="2">11 12</td>
    <td>13</td>
  </tr>
</table>

在上述代码中，我们设置了合并单元格的列边框，其中colspan用于合并单元格并将它们的列跨度设置为2。另一方面，设置单元格为rowspan，可以将单元格的行跨度合并，如上述代码的第二行所示。

小结

table元素常常用于展示数据集合，美化表格的边框是必不可少的。通过设置单元格边框的属性和行/列跨度，我们能够方便地合并单元格的边框，让表格更加美观易读。

阅读剩余 48%