如何仅在HTML表格中间添加分隔线？

嘿，我来帮你搞定HTML表格中间加分隔线的问题！这里有几个简单实用的方法，你可以根据自己的需求选：

方法1：给特定行加底部边框（精准控制某一行） #

如果明确知道要在哪一行下面加分隔线，直接给那一行加个类，然后用CSS设置边框就行，非常直观：

HTML代码：

<table>
  <tr><td>第一行内容</td><td>右侧内容</td></tr>
  <tr><td>第二行内容</td><td>右侧内容</td></tr>
  <!-- 这一行下面加分隔线 -->
  <tr class="divider-row"><td>第三行内容</td><td>右侧内容</td></tr>
  <tr><td>第四行内容</td><td>右侧内容</td></tr>
  <tr><td>第五行内容</td><td>右侧内容</td></tr>
</table>

CSS代码：

/* 先让表格边框合并，避免缝隙 */
table {
  border-collapse: collapse;
  width: 100%;
}
/* 给目标行设置底部粗边框 */
.divider-row {
  border-bottom: 2px solid #333; /* 粗细、颜色都可以自己调 */
}

方法2：用CSS选择器自动选中中间行（不用改HTML） #

如果不想给行加类，直接用nth-child选择器定位中间行，适合行数固定的表格：

CSS代码（假设表格有5行，中间是第3行）：

table {
  border-collapse: collapse;
  width: 100%;
}
/* 选中第3行，给它加底部边框 */
tr:nth-child(3) {
  border-bottom: 2px solid #000;
}

方法3：用tbody分组（适合表格逻辑上分成上下两部分） #

如果你的表格内容本来就可以分成上下两个逻辑块，用<tbody>把它们分开，然后给第二个tbody加顶部边框，这种方法语义化更好：

HTML代码：

<table>
  <!-- 上半部分 -->
  <tbody>
    <tr><td>第一行内容</td><td>右侧内容</td></tr>
    <tr><td>第二行内容</td><td>右侧内容</td></tr>
    <tr><td>第三行内容</td><td>右侧内容</td></tr>
  </tbody>
  <!-- 下半部分 -->
  <tbody>
    <tr><td>第四行内容</td><td>右侧内容</td></tr>
    <tr><td>第五行内容</td><td>右侧内容</td></tr>
  </tbody>
</table>

CSS代码：

table {
  border-collapse: collapse;
  width: 100%;
}
/* 给第二个tbody加顶部边框，实现分隔线 */
tbody + tbody {
  border-top: 2px solid #666;
}

💡 注意：不管用哪种方法，border-collapse: collapse一定要加，不然表格的边框会有缝隙，分隔线显示不连贯哦！颜色和粗细可以根据你的页面风格调整，比如把2px改成1px，#333改成#ccc之类的。

内容的提问来源于stack exchange，提问作者user7597016