html - 如何限制 HtmlTable 列的宽度？

Question

我需要减小 HTMLTable 列的宽度，并在其中换行文本内容。

我尝试设置宽度并强制文本换行的所有操作都失败了。这是 html:

<td width="40" class="skybluebackground centertext"><label class="wrappable"><strong>Total Expenses</strong></label></td>

...其他行在该列中有这样的单元格(数字输入元素):

<td width="40"><input width="40" type="number" step="0.01" min="0" 
name="airfareTotalExpense" id="airfareTotalExpense"/></td>

尝试减少这些数字输入元素的宽度也失败了。

我尝试过的 CSS:

.wrappable {
  width: 10em;
}

我也尝试设置其他几个属性，但显然没有任何效果。

我也试过这个:

总费用

使用这个 CSS:

td.可包装{ 宽度:5em；

...但这也不起作用 - 该列对于我的目的来说仍然太宽，因此文本不会换行。

我也在 HtmlTable 上试过这个:

 <COLGROUP WIDTH="48"></COLGROUP>
 <COLGROUP WIDTH="32"></COLGROUP>
 . . .

...但它也没有效果。

在 HTMLTables 上设置列宽并不难；我在这里错过了什么？

Answer 1

Label 是一个内联元素，因此设置的宽度不起作用。将其更改为 block 或 inline-block。

http://codepen.io/anon/pen/zvOwNJ

.wrappable {
  display: inline-block;
  width: 100px;
  border: 1px solid #333;
}