微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css多个table列宽固定

CSS中通过table元素和td、th元素来创建表格,在表格中,各列的宽度认会根据表格内容调整,但是在某些情况下,我们需要让表格的每一列的宽度都是固定的,这时候就需要使用CSS来设置表格的列宽。

css多个table列宽固定

在CSS中,可以使用table-layout属性来控制表格的布局方式。认情况下,table-layout属性的值为auto,即表格的宽度会根据表格的内容自适应调整。而当设置table-layout为fixed时,表格的宽度将会由其列的宽度来决定。

table {
    table-layout: fixed;
}

接下来,我们需要设置每一列的宽度。可以通过设置td、th元素的width属性来控制每一列的宽度。

td,th {
    width: 100px;
}

上面的代码将会让表格的每一列的宽度都为100px。如果希望每列的宽度不同,可以设置不同的值。

当表格的某列内容较多时,其宽度可能会超出预设的宽度。这时候就需要让其内容换行。可以通过设置td、th元素的word-wrap属性来实现,将其设置为break-word即可。

td,th {
    word-wrap: break-word;
}

除了以上方法之外,还可以使用CSS3中的calc()函数来计算每一列的宽度。calc()函数可以将数学表达式作为参数,用于计算元素的宽度、高度等。例如,我们希望表格的第一列的宽度为100px,第二列的宽度为50%,第三列的宽度为calc(100% - 150px)。

td:first-child {
    width: 100px;
}
td:nth-child(2) {
    width: 50%;
}
td:nth-child(3) {
    width: calc(100% - 150px);
}

以上就是CSS中设置多个表格列宽固定的方法

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。