怎样调整<table> 中每一列的宽度？

This topic created in 5466 days ago, the information mentioned may be changed or developed.

虽然都喜欢用li 或者div什么的，但是在展示数据列表的时候，还是用table比较好。

但是现在的问题是，怎样能让每一列的宽度好看一些呢？

如果让每一列自动调整，不加宽度，那么平均起来字数少的列就会很宽，不好看。

如果定义了列宽，那么文字多的时候就会挤在一起也太难看。

这个table调整，是不是必须用精确地数字或者百分比来做呢？有没有不用调整就可以好看一些的办法？

table

一列

宽度

10 replies • 1970-01-01 08:00:00 +08:00

iandyh

Jun 17, 2011

可以放 div 在 table 里，控制 div 的宽度。

zythum

Jun 17, 2011

可以写tr或者td的css啊。
我记得table-cell是可以定义宽高的。

darasion

Jun 17, 2011

@zythum 可是我想让它们自动适应呢。。。。

TheOnly92

Jun 17, 2011

无定义就是自动了，要不 width:auto 也应该是自动

zythum

Jun 17, 2011

@darasion 朱一承认没看懂上面的话就发言了。同@TheOnly92 酱的话，table的话宽度是自动的。某一个td字数多了的话那一列自动会宽起来的啊。如果注意美观的话还可以加下padding什么的。

如果还觉得不多的话@darasion 能不能把需要说的更清楚些。

chone

Jun 17, 2011

table的列宽比例所有行是一致的，不能更改(改变css display为block这类当然可以无视这个)。
如果每行中列宽比例都相同，如果有规律且是连续的可以分成多个table。如果没什么规律还是改用li div这类来处理吧，用border绘制表格的分割线。

darasion

Jun 17, 2011

感谢各位，看来这个问题还是先不要考虑了，麻烦得很。

yyfearth

Jun 17, 2011

只要定义第一行，各个td的宽度就可以了把。但是的确会自动调整，而且貌似各个浏览器行为还不一致。
lz可以参考一下extjs的做法，他的grid还是做的很好的。

darasion

Jun 17, 2011

一些复杂的东西就不考虑了。如果不行就算了。

因为现在很多人开发项目，并且人员也不是很固定，几个月就来，几个月就走的。
所以代码尽量简单，如果复杂了，经手的人一多，一些遗留的无效代码就会变得很恐怖。
人们常常是不管三七二十一，一个页面直接copy以前的，css class id 等等，有用没用的放在一起。
刚刚梳理过这样的代码，改动很少，但却伤筋动骨。

再次感谢大家。

spark

Jun 17, 2011

呃...
<table>
<colgroup>

<col width="15%" />

<col width="15%" />
</colgroup>
<tbody>
<tr>
<td>col-1</td>
<td>col-2</td>
</tr>
<tr>
<td>col-1</td>
<td>col-2</td>
</tr>
</tbody>
</table>