本文摘自PHP中文网，作者php中世界最好的语言，侵删。
这次给大家带来表格单元格td设置宽度无效应该如何解决，表格单元格td设置宽度无效应该解决的注意事项有哪些，下面就是实战案例，一起来看一下。
在做table页面时，有时对td设置的宽度是无效的，td的宽度始终有内部的内容撑开，可以设置padding，但直接设置width却无效，下面我们来具体看下这个示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <div>
<table border="1px">
<tr>
<td width="100px" style="width: 100px !important;">1000800</td>
<td>1000000</td>
<td>1000000</td>
</tr>
<tr>
<td>1000000</td>
<td>10000300</td>
<td>1000000</td>
</tr>
</table>
</div>
<table border="1px">
<tr>
<td width="100px">1000000</td>
<td>1000000</td>
<td>1000000</td>
</tr>
<tr>
<td>1000000</td>
<td>10000300</td>
<td>1000000</td>
</tr>
</table>
* {margin: 0; padding: 0;}
.div1 {position: relative; width: 150px; height: 100px; overflow: scroll; border: 1px solid red;}
|
我们可以看到，类div1中的第一个单元格虽然设置了宽度，但是却是无效的。单元格内容始终由内容而决定，那么既然是由内容决定的那么我们就想办法让“内容”把单元格撑开，这样就行了。
我们可以在td中加个div，然后给div设置宽度，来试一下：
修改类div1中的一部分代码：
1 | <td width="100px" style="width: 100px !important;">1000800</td>
|
修改为
1 | <td><div>1000800</div></td>
|
然后在样式里写入：
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
阅读剩余部分
相关阅读 >>
怎样可以固定table的宽度 table-layout: fixed
在html语言中，单元格的标记是什么
html如何设置单元格颜色
css怎么设置span的宽度
css如何设置div的宽度
表格单元格td设置宽度无效应该如何解决
html怎么设置table宽度
css怎么设置td的宽度
怎样让textarea文本域宽度和高度width及height自动适应
html表格合并单元格的方法
更多相关阅读请进入《单元格》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 表格单元格td设置宽度无效应该如何解决
