jquery - 我如何收拾 table ？

Question

我有下表:

https://jsfiddle.net/DTcHh/15580/

效果很好，但是当我在第 4 列输入更长的描述时，按钮就会变得困惑(它们堆叠在一起)。

我尝试将 width 和 max-width 设置为百分比:

<td style="max-width=10%">Winter</td>
<td style="max-width=10%">2014-12-01</td>
<td style="max-width=10%">2015-02-01</td>
<td style="max-width=40%">some text</td>
<td style="max-width=30%"><button class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> Update</button><a href="#" class="btn btn-info"><span class="glyphicon glyphicon-trash"></span>Delete</a></td>

但是那没有效果。我只希望描述中的文本在其边界内换行(我也尝试过自动换行但没有成功)然后向下而不是展开并弄乱按钮。

有人有什么建议吗？

EDIT1 我应该强调，这需要在一定程度上保持可扩展性。

Answer 1

你可以像这样使用css。要用固定的 15% 宽度控制你的 th，最后一个有 40% 宽度。或者您可以只指定您想要的表格每一列的百分比。

table {
  table-layout:fixed;
}
th {
  width:15%;
}
th:last-of-type {
  width:40%;
}