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

前端之家收集整理的这篇文章主要介绍了如何使用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)).

猜你在找的CSS相关文章