Html css表格单元格的宽度过大

我有一张这样的桌子：

+------------+---------------------------------+-----------------------+
|BUTTON      |            Text                 |BUTTON BUTTON          |
+------------+---------------------------------+-----------------------+

+------+---------------------------------+-------------+
|BUTTON|            Text                 |BUTTON BUTTON|
+------+---------------------------------+-------------+

+------+---------------------------------+------+
|BUTTON|            Text                 |BUTTON|
|      |                                 |BUTTON|
+------+---------------------------------+------+

我也希望它看起来像这样：

+------------+---------------------------------+-----------------------+
|BUTTON      |            Text                 |BUTTON BUTTON          |
+------------+---------------------------------+-----------------------+

+------+---------------------------------+-------------+
|BUTTON|            Text                 |BUTTON BUTTON|
+------+---------------------------------+-------------+

+------+---------------------------------+------+
|BUTTON|            Text                 |BUTTON|
|      |                                 |BUTTON|
+------+---------------------------------+------+

i、 e.我希望外部列根据其内容尽可能宽。我希望里面的内容（按钮）排成一行，挨着一行

…到目前为止，我最好的办法是在外柱上设置1px的宽度。但是，由于按钮是浮动的，它最终看起来是这样的：

+------------+---------------------------------+-----------------------+
|BUTTON      |            Text                 |BUTTON BUTTON          |
+------------+---------------------------------+-----------------------+

+------+---------------------------------+-------------+
|BUTTON|            Text                 |BUTTON BUTTON|
+------+---------------------------------+-------------+

+------+---------------------------------+------+
|BUTTON|            Text                 |BUTTON|
|      |                                 |BUTTON|
+------+---------------------------------+------+

请参见此“在jsbin上试用”：

谢谢

示例：

例如：

---

如果将表格宽度设置为“自动”，则表格宽度应基于内容。

如果将表格宽度设置为“自动”，则表格宽度应基于内容。

。。。
<td style="white-space: nowrap; width: 1px;">...</td>

在第1列和第3列。您可能必须在第三列的按钮之间使用

，而不是正数

。。。

---

在第1列和第3列。您可能必须在第三列的按钮之间使用

，而不是正数

尝试

显示：内联块而不是
浮动：左在
#c1
和
#c2
上。然后从
#框
中删除
宽度：100%
。或者如果要保留100%:Try
显示：内联块而不是
浮动：左在
#c1
和
#c2
上。然后从
#框
中删除
宽度：100%
。或者如果要保留100%: