html 列宽调整（td width 不生效问题）

最新推荐文章于 2024-03-26 23:25:31 发布

Zonson9999

最新推荐文章于 2024-03-26 23:25:31 发布

阅读量5.5k

点赞数 1

分类专栏： html-css

本文链接：https://blog.csdn.net/wuzhong8809/article/details/119753555

版权

html-css 专栏收录该内容

7 篇文章

订阅专栏

解决HTML表格中td width属性不生效的问题，需设置table-layout:fixed。然而，单元格内容默认不自动换行，仅对单词间空格换行，中文可以正常换行。当表格仅有两列且width设为25%时，宽度设置无效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1:给 table 加上 table-layout:fixed 属性

2: 给 td 加上 width属性

<html>
<body>

<style>

.mytable {
table-layout:fixed
}

</style>

<table class = "mytable" border="1"  >
  <tr>
    <th width="300px">Month</th>
  </tr>
  <tr>
    <td width="300px">Januarydffffffffdaf</td>
  </tr>
</table>

</body>
</html>

但是比如，我们把width 改为 10，可以看到表格宽度不再减少：

也就是说，默认长度至少为单元格内容长度（不换行）。

怎么自动换行呢？

自动换行

.mytable {
word-wrap: break-word;
word-break: break-all;
table-layout:fixed;
}

为什么不生效？？？

摸索了许久，这里只能对单词间的空格进行换行，坑，大坑。

不过中文是OK的：

另一个问题

表格默认会撑满整个table的宽度，

<html>
<body>

<style>
.mytable {
position: absolute;
left: 14%;
width:72%;
word-wrap: break-word;
word-break: break-all;
table-layout:fixed;
}
</style>
<table class = "mytable" border="1"  >
  <tr>
    <td width="25%" >哒哒哒哒</td>
    <td width="25%" >哒哒哒哒</td>
    <td >哒哒哒哒</td>
    <td >哒哒哒哒</td>
    <td >哒哒哒哒</td>
    <td >哒哒哒哒</td>
  </tr>
</table>
</body>
</html>

<table class = "mytable" border="1"  >

  <tr>
    <td width="25%" >哒哒哒哒</td>
    <td width="25%" >哒哒哒哒</td>
  </tr>
</table>

如果只有两例的时候， width = 25% 不生效。

html 列宽调整 （td width 不生效问题）

自动换行

另一个问题

html 列宽调整（td width 不生效问题）