如何限制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.wrappable {   宽度：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;
}