如何设置<table>的行宽使其贴合内容避免文本后出现多余空白

核心修改思路 #

默认<table>元素会自动占满父容器的可用宽度，才会出现行尾大量空白的问题，通过CSS的宽度控制属性让表格自动适配内容尺寸即可解决。

修改后的完整代码 #

CSS部分 #

table, tr, td {
  border: 1px solid black;
  /* 可选：合并相邻边框，避免出现双边框优化视觉效果 */
  border-collapse: collapse;
}

table {
  /* 核心属性：让表格宽度自动收缩到刚好容纳所有内容的总宽度 */
  width: fit-content;
  /* 可选：强制单元格内容不换行，宽度完全适配单行内容长度 */
  white-space: nowrap;
}

/* 可选：给单元格加内边距，避免文字紧贴边框 */
td {
  padding: 3px 6px;
}

HTML部分无需修改，保持原有代码即可。 #

可选调整说明 #

• 如果你允许长内容自动折行，直接删除white-space: nowrap属性即可
• 不需要单元格内边距就删除td的padding配置
• 不需要合并边框就删除border-collapse: collapse属性

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