td 内容自动换行 table表格td设置宽度后文字太多自动换行
发布时间:2022-12-16 16:02:12 作者:佚名 我要评论
table表格td设置宽度后文字太多导致自动换行,这是一个很常见的问题,或许很多的网友已经有了好的解决方法,如果依然有童鞋们不会的,可以参考下本文,可能会有意外的收获
设置table 的 style="table-layout:fixed;" 然后设置td的 style="word-wrap:break-word;" 即可
但这种情况下表格宽度自由分配,所以如果不用设置table 的 style="table-layout:fixed;"直接使用下面的代码也可以实现换行
word-wrap:break-word;word-break:break-all;
案例
<table style="TABLE-LAYOUT: fixed" border="1" cellspacing="0" cellpadding="0" width="200"> <tbody> <tr> <td style="WORD-WRAP: break-word" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td> <td>aaaaa</td> </tr> <tr> <td style="WORD-WRAP: break-word" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td> <td>aaaaa</td> </tr> </tbody> </table>
例子二
<table border="1" cellspacing="0" cellpadding="0" width="200"> <tbody> <tr> <td style="word-wrap:break-word;word-break:break-all;" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td> <td>aaaaa</td> </tr> <tr> <td style="word-wrap:break-word;word-break:break-all;" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td> <td>aaaaa</td> </tr> </tbody> </table>
比较好的写法
#soft-intro table{border:1px solid #cccccc; border-collapse:collapse; text-align:center; margin-top:0.54em; clear:both;width: 100%;} #soft-intro table th,#soft-intro table td{padding:8px; border:1px solid #dddddd;line-height:22px; text-align:left} #soft-intro table th{background:#f9f9f9;} #soft-intro table thead, #soft-intro table.jbborder tr {background-color:#fff;} #soft-intro table tr:nth-child(even){background-color:#f9f9f9} #soft-intro table tbody tr:hover {background: rgba(255,255,153,.4)} #soft-intro table th img{display:block; margin:5px auto 0;} #soft-intro table td{text-align:left;word-wrap:break-word;word-break:break-all;} #soft-intro table td.version{font-weight:bold;} #soft-intro table pre{width:auto;margin:0;padding:0;border:0;background:transparent} #soft-intro table td p{margin:0; padding:0;line-height:22px;word-wrap:break-word;word-break:break-all;} #soft-intro table ul{margin-top:2px;}
相关文章
- 这篇文章主要介绍了html解决table设置宽度无效的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2020-07-30
- 这篇文章主要介绍了HTML页面自适应宽度的table(表格),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习2020-06-16
固定 table宽度 table-layout: fixed
如果单元格中的文本超过宽度限制,就会自动换行,高度自动增高,导致整个表格的样式参差不齐,不过可以通过禁用文本换行来解决这个问题2014-05-15表格设置table-layout:fixed后对单元格宽度设置无效
在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会失效,下面有详细的解决方法,大家可以学习学习2014-04-14- 最好不要在table里面直接设置宽度,高度等,在style里面添加设置,就不会出现无效问题,代码直接拷贝到body中间即可使用,下面有个示例,大家可以参考下2014-04-11
- 页面中table宽度设置width之后,宽度仍然不是固定的,文字太长后不换行,下面有个不错的方法可以有效解决这个问题2014-02-17
html table呈现个人简历以及单元格宽度失效的问题解决
这篇文章主要介绍了html table呈现个人简历以及单元格宽度失效的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下2021-01-22
最新评论