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

如何使用CSS构建复杂的表?

最近我遇到了一个复杂的表实现,例如:

tr1: | td1 | td2 | td3 |
tr2: |  th  |   td   |
tr3: |  th  |   td   |
...

如本例所示,我希望td1和td3的宽度是固定的,当屏幕无线电/浏览器宽度改变时,td和td2是宽度自动扩展.我想知道是否有办法通过使用CSS来做到这一点?

为了清楚起见,我已经将colspan和width值用于我的目的,但是如何通过使用colspan和width值使td1小于th? colspan不起作用,也没有宽度值

最佳答案
正确设置colspans是一件简单的事情.

标题行:每个细胞获得2个colspan(3个细胞* 2个colspan = 6个colspan-细胞).
表体行:每个细胞得到3个细胞(2个细胞* 3个colspan = 6个colspan细胞).

UPDATE

似乎存在不一致性,其涉及具有colspan和宽度设置的列.浏览器似乎忽略宽度值甚至最大宽度(最小宽度工作).

例:

这产生大致所需的输出,但第th列th1扩展以匹配以下td(td2)的相同大小.除非表小于240px,否则两者总是占据表的50%,然后th1保持在120px.

这似乎与我不一致,我没有解决方法,最好的是,如果你检查是否可以不同的方式显示表(即包括标题在内的所有行中的列数相同(这将更有意义imho)).

原文地址:https://www.jb51.cc/css/427694.html

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