V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
darasion
V2EX  ›  问与答

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

  •  
  •   darasion · 2011-06-17 09:30:48 +08:00 · 16638 次点击
    这是一个创建于 4910 天前的主题,其中的信息可能已经有所发展或是发生改变。
    虽然都喜欢用li 或者div什么的,但是在展示数据列表的时候,还是用table比较好。

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

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

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

    这个table调整,是不是必须用精确地数字或者百分比来做呢?有没有不用调整就可以好看一些的办法?
    10 条回复    1970-01-01 08:00:00 +08:00
    iandyh
        1
    iandyh  
       2011-06-17 09:32:34 +08:00
    可以放 div 在 table 里,控制 div 的宽度。
    zythum
        2
    zythum  
       2011-06-17 09:50:06 +08:00
    可以写tr或者td的css啊。
    我记得table-cell是可以定义宽高的。
    darasion
        3
    darasion  
    OP
       2011-06-17 09:54:34 +08:00
    @zythum 可是我想让它们自动适应呢。。。。
    TheOnly92
        4
    TheOnly92  
       2011-06-17 09:55:37 +08:00
    无定义就是自动了,要不 width:auto 也应该是自动
    zythum
        5
    zythum  
       2011-06-17 10:03:19 +08:00
    @darasion 朱一承认没看懂上面的话就发言了。同@TheOnly92 酱的话,table的话宽度是自动的。某一个td字数多了的话那一列自动会宽起来的啊。如果注意美观的话还可以加下padding什么的。

    如果还觉得不多的话@darasion 能不能把需要说的更清楚些。
    chone
        6
    chone  
       2011-06-17 10:04:30 +08:00
    table的列宽比例所有行是一致的,不能更改(改变css display为block这类当然可以无视这个)。
    如果每行中列宽比例都相同,如果有规律且是连续的可以分成多个table。如果没什么规律还是改用li div这类来处理吧,用border绘制表格的分割线。
    darasion
        7
    darasion  
    OP
       2011-06-17 13:56:07 +08:00
    感谢各位,看来这个问题还是先不要考虑了,麻烦得很。
    yyfearth
        8
    yyfearth  
       2011-06-17 14:04:10 +08:00
    只要定义第一行,各个td的宽度就可以了把。但是的确会自动调整,而且貌似各个浏览器行为还不一致。
    lz可以参考一下extjs的做法,他的grid还是做的很好的。
    darasion
        9
    darasion  
    OP
       2011-06-17 18:28:27 +08:00
    一些复杂的东西就不考虑了。如果不行就算了。

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

    再次感谢大家。
    spark
        10
    spark  
       2011-06-17 21:59:07 +08:00
    呃...
    <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>
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3204 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 13:16 · PVG 21:16 · LAX 05:16 · JFK 08:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.