如何仅用HTML和CSS实现表头自适应列宽的尾部下划线效果

核心逻辑 #

表格的表头<th>元素宽度会随当前列的所有内容自动撑开，直接给<th>设置底部边框即可实现下划线自动匹配列宽，无需额外编写固定长度的装饰元素。

代码示例 #

HTML结构 #

<table>
  <thead>
    <tr>
      <th>Header1</th>
      <th>Header2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>L1Col1 content</td>
      <td>L1Col2 wider content</td>
    </tr>
    <tr>
      <td>L2Col1 datum</td>
      <td>L2Col2 datum2</td>
    </tr>
  </tbody>
</table>

CSS样式 #

/* 合并表格边框，消除单元格默认间距 */
table {
  border-collapse: collapse;
  text-align: left;
}
/* 统一单元格内边距，避免内容过挤 */
th, td {
  padding: 6px 16px;
}
/* 表头底部加下划线，自动适配列宽 */
th {
  /* 若要示例中的短横线样式，将solid改为dashed即可 */
  border-bottom: 1px solid #000;
  font-weight: normal;
}

调整说明 #

• 若需要表头文字和下划线之间预留更多间距，可增大th的padding-bottom属性值
• 下划线的粗细、颜色、样式可通过修改border-bottom的属性值自定义
• 列宽会自动跟随每列最长的内容调整，下划线长度也会同步自适应

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