首页 > web前端 > css教程 > 如何在具有固定宽度列的表中使用可变宽度列的百分比?

如何在具有固定宽度列的表中使用可变宽度列的百分比?

Susan Sarandon
发布: 2024-11-16 02:59:03
原创
975 人浏览过

How to Use Percentages for Variable Width Columns in Tables with Fixed Width Columns?

在表中使用 calc():一种替代解决方案

当尝试使用 calc() 函数实现固定宽度和可变宽度的表列时,可能会出现以下情况:遇到限制。在表格中,calc() 函数不支持宽度计算的百分比。

要克服这一挑战,请考虑采用不同的方法:

  1. 设置表格布局attribute: 通过将表的 table-layout 属性设置为“fixed”,强制列遵守特定宽度。此外,为表格分配 100% 的宽度。
  2. 删除 calc() 并使用百分比: 对其余列使用普通百分比,而不是 calc()。确定固定宽度的列并分配它们的宽度。剩余空间将按比例分配在相对宽度的列中。

CSS 示例:

td.title, td.interpret {
    width: 40%;
}

td.album {
    width: 20%;
}
登录后复制

要点:

  • 将表格布局设置为“固定”可确保列宽一致到指定的值。
  • 使用相对宽度列的百分比可以让剩余空间按比例分配。
  • Display:table 是表格布局工作所必需的,但它阻止了使用桌子的高度。

修改示例代码:

<table border="0">
登录后复制

以上是如何在具有固定宽度列的表中使用可变宽度列的百分比?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板