表格单元格td设置宽度无效的解决办法

悠悠 2022-08-30 15:53 464阅读 0赞

现象：  
下图中第二列的内容被遮住了，虽然td有width，但还是撑出外层容器了。  
table中td设置width有时，使用属性width方式，或者在td加style都不能生效。

代码：  
     <style>  
    table,tr,td\{  
        border: 1px solid rebeccapurple;  
    \}  
    td\{  
        padding: 14px;  
        /\* word-break: break-all; \*/  
    \}  
    </style>

<div style="width:500px;height:150px;overflow: hidden;background: powderblue;">  
        <table>  
            <tr>  
                <td width="100px">abc</td>  
                <td width="600px">测试名字长度测试名字长度测试名字长度测试名字长度测试名字长度测试名字长度测试名字长度测试名字长度测试名字长度测试名字长度end</td>  
            </tr>  
            <tr>  
                <td><div style="background:plum;width:150px">a</div></td>  
                <td>babcdefghijklmnopqrstyvwxyzabcdeijklabcdefghijklmnopqrstyvwxyzabcdeijkl</td>  
            </tr>  
        </table>  
    </div>    
分析  
将第二行的内容改为‘b’，表格内容显示正常如下图。

分析原因：  
table总宽度根据所有td的宽度撑开，而每个td宽度由最长的决定。  
而td的属性word-break:normal; 在中文时会自动换行，在一串英文字符时就无法换行，也就出现将td的宽度撑大的问题。  
（将第二行的内容换为一段英文单词便也会自动换行）

word-break: normal|break-all|keep-all;

normal    使用浏览器默认的换行规则。  
break-all    允许在单词内换行。  
keep-all    只能在半角空格或连字符处换行。  
解决方法：  
方案1. 在td上加word-break: break-all;；  
方案2. 在那列会撑出的td内加<div>，在div上加宽度，限制内容的宽度，以解决width设置无效的问题；

附：  
在解决这个问题时，发现了一个方案，也是一种很有启发的解决width的方法：table-layout : fixed  
可参考：https://www.jianshu.com/p/0b027c877a0d  
————————————————  
版权声明：本文为CSDN博主「橙橙鲁」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/Dorothy1224/article/details/83274330