word-wrap&&word-break,奇偶行、列设置样式

时间:2021-07-05 08:37:39
1、word-wrap和word-break区分。
来源场景:机械租赁mvc驾驶员信息查看:
word-wrap&&word-break,奇偶行、列设置样式
word-wrap&&word-break,奇偶行、列设置样式
当备注的文字多的时候,第一列的值成这模样:
word-wrap&&word-break,奇偶行、列设置样式
word-wrap&&word-break,奇偶行、列设置样式
解决方案:设置table 的td可自动换行。首先table设置固定样式:table-layout:fixed
再把td样式改成: td {
        word-wrap: break-word;
    }。
 
2、奇偶行、列设置样式。
来源场景:设置好换行后,可第一列太宽,用内联样式设置td宽度也不管用,如下图所示:
word-wrap&&word-break,奇偶行、列设置样式
word-wrap&&word-break,奇偶行、列设置样式
解决方案:最后原因是:在table标签里竟然设置了table的宽度。可能是自适应整个表的列行、默认列的宽度加大了。去掉table的宽度后,我们设置下你需要的td列的宽度即可。我需要的是每行的奇数列设置下宽度。奇数列,用伪选择器:
table td:nth-child(2n+1) {
        width: 70px;
    }