如何用单行表格与hr元素实现自适应标题头部？

你的问题根源在于table-layout: fixed和第三列width:90%的冲突——固定布局下，百分比宽度会强制按表格总宽计算，直接挤压了第二列的自适应空间。下面是两种可行的解决思路：

修正表格实现方案 #

<table border="1" cellpadding="1" cellspacing="1" style="width:100%;">
  <tr>
    <td style="width:40px;"><hr style="margin:0;"/></td>
    <td style="white-space: nowrap; padding: 0 8px;"><strong>Some Title</strong></td>
    <td style="width:100%;"><hr style="margin:0;"/></td>
  </tr>
</table>

关键调整说明 #

• 移除table-layout: fixed：让表格自动根据列内容和设置计算宽度，避免强制布局导致的挤压
• 第一列保留width:40px固定宽度，给<hr>加margin:0消除默认边距，确保横线占满列宽
• 第二列不设置宽度，靠white-space: nowrap保证标题不换行，同时加左右内边距让标题和横线有间距
• 第三列设置width:100%：自动填充表格剩余的所有宽度，<hr>同样加margin:0占满列宽

更简洁的Flex布局替代方案 #

如果不需要依赖表格，用Flex布局能更轻松实现需求，完全规避列宽冲突问题：

<div style="display:flex; align-items:center; width:100%;">
  <hr style="width:40px; margin:0;"/>
  <strong style="padding:0 8px;">Some Title</strong>
  <hr style="flex:1; margin:0;"/>
</div>

这里flex:1会让右侧横线自动填充容器剩余的所有空间，布局逻辑更直观。

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