最近我遇到了一个复杂的表实现,例如： tr1: | td1 | td2 | td3 |tr2: | th | td |tr3: | th | td |... 如本例
... . . 最近我遇到了一个复杂的表实现,例如：
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和宽度设置的列.浏览器似乎忽略宽度值甚至最大宽度(最小宽度工作).
例：
<table border="1" style="width: 50%;"> <tr> <td style="width: 100px;">td1</td> <td colspan="2">td2</td> <td style="width: 100px;">td3</td> </tr> <tr> <th colspan="2" style="min-width: 120px; max-width: 120px; width: 120px;">th1</th> <td colspan="2">td2</td> </tr> <tr> <th colspan="2" style="min-width: 120px; max-width: 120px; width: 120px;">th1</th> <td colspan="2">td2</td> </tr></table>
这产生大致所需的输出,但第th列th1扩展以匹配以下td(td2)的相同大小.除非表小于240px,否则两者总是占据表的50％,然后th1保持在120px.
这似乎与我不一致,我没有解决方法,最好的是,如果你检查是否可以不同的方式显示表(即包括标题在内的所有行中的列数相同(这将更有意义imho)).
. . .. ...