之前在做table的时候,因为不是用来做数据的展示的,所以对于具体的格式没有太高的要求,所以没有去深入了解,这次在做一个数据展示列表的时候使用table,因为假设每一个单元格数据是没有固定长度的,所以为了界面不会因为数据的变化格式发生大变化,所以希望table的每一列都是固定宽度。然后使用js对数据处理。
但是在使用css设置时:
.item_list {
display: inline-block;
position: absolute;
right: 5%;
top: 45px;
width: 40%;
height: 90%;
border: 1px solid white;
border-radius: 5px;
table-layout: fixed;
text-align: center;
overflow-y: scroll;
}
.item_list tr td {
width: 22%; //一共五列,注意因为有边框,所以不能100%
}
.item_list tr>:first-child { //第一列显示序号,所以宽度较小
width: 8%;
}
这样设置之后每一的宽度还是随着列单元格中的内容长度发生变化。
百度各种资料,对比之后发现table还有其他的属性需要设置,才能达到固定列宽的目的。
需要再添加.item_list{
word-break: break-all;
word-wrap: break-word;
}
这样之后达到了固定列宽的作用,不过还有个问题这样,单元格内容过长会自动换行导致行高不一致,这个可以采用tbale属性解决,也可以使用js在数据加载时对数据进行处理来解决这个行高的问题