如何在HTML表格的空白列位置添加垂直边框

<hr/>属于水平分隔线元素，只能生成水平方向的分割线，无法实现你要的垂直边框效果，通过CSS设置单元格边框属性即可实现需求，两种常用方案如下：

• 方案1：直接给表头列设置右侧边框，不需要额外新增空白列

<style>
table th {
  /* 可自行调整边框的颜色、粗细、样式 */
  border-right: 1px solid #666;
  /* 内边距可避免内容紧贴边框，按需调整即可 */
  padding: 6px 10px;
  text-align: left;
}
table td {
  padding: 6px 10px;
}
</style>
<table>
  <tr>
    <th>Machine Weight: </th>
    <td>50kg</td>
  </tr>
  <tr>
    <th>Carrying Capacity: </th>
    <td>30kg</td>
  </tr>
</table>

• 方案2：如果需要保留中间空白列再做垂直分割，可新增空白单元格单独设置边框

<style>
/* 定义空白列的宽度和边框样式 */
.v-border-col {
  width: 15px;
  border-right: 1px solid #666;
}
table th, table td {
  padding: 6px 10px;
  text-align: left;
}
</style>
<table>
  <tr>
    <th>Machine Weight: </th>
    <td class="v-border-col"></td>
    <td>50kg</td>
  </tr>
  <tr>
    <th>Carrying Capacity: </th>
    <td class="v-border-col"></td>
    <td>30kg</td>
  </tr>
</table>

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