表列的最大宽度

时间:2013-08-29 02:19:46

标签: html css html-table

我尝试在表格中设置列的最大宽度(也就是说,我希望该列中的所有单元格具有相同的最大宽度),但是我的初始尝试失败了:

<table border="1">
    <tr><td style="max-width:100px">a bunch of text here, it should get wrapped</td></tr>
    <tr><td>a bunch of text here, it should get wrapped</td></tr>
</table>

(也在http://jsfiddle.net/Le6H6/4/

我原本期望设置一个单元格的最大宽度应该自动为同一列中的所有单元格设置它。但不知何故,第二行中的单元格否决了我设置的最大宽度,并且两个单元格现在都比宽度宽。

我有两个问题:

  1. 为什么会这样?
  2. 我知道在该列中的每个单元格上设置最大宽度(单独或通过适当的CSS规则)将实现我想要的。但是,还有一种方法可以设置列的最大宽度而不为每个单元格设置它吗?

2 个答案:

答案 0 :(得分:2)

1)这种情况正在发生,因为这就是HTML表的工作方式。该表重新调整最大单元格宽度的大小。如果你考虑一下,它就具有逻辑意义。

2)有很多方法可以解决这个问题,但是没有任何方法可以满足您为单个单元格添加单一样式的限制。

很抱歉,如果这不是您正在寻找的答案。 :/

答案 1 :(得分:0)

您不能这样做,因为max-width可以应用于单个单元格。因此,您可以使用<div>来执行此操作,尤其是针对该单元格,或将其设为<table>

试试这个:

<table border="1" style="max-width:100px;">
    <tr>
        <td>a bunch of text here, it should get wrapped</td>
    </tr>
    <tr>
        <td>a bunch of text here, it should get wrapped</td>
    </tr>
</table>

使用css

tr td { max-with :100px; }