1

我有一个看起来像这样的表：

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

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

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

即，我希望外列根据其内容尽可能宽。我希望内部内容（按钮）彼此相邻排列？

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

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

在 jsbin 上看到这个尝试：http: //jsbin.com/orayoy/1/edit

谢谢！

4

3 回答 3

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

On the 1st and 3rd columns. You MIGHT have to use a &nbsp; between the buttons in the 3rd col, not positive.

于 2013-01-31T15:48:43.423 回答
0

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

于 2013-01-31T15:46:19.220 回答
0

示例：http: //jsbin.com/orayoy/8/edit

#box {
    display: table;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
#a {
    display: table-cell;
    background-color: lime;
}
#b {
    display: table-cell;
    background-color: blue;
}
#c {
    width: 1px;
    white-space: nowrap;
    display: table-cell;
    background-color: red;
}
#c1 {
    display: inline-block;
    height: 100%;
    background-color: pink;
}
#c2 {
    display: inline-block;
    height: 100%;
    background-color: pink;

}
于 2013-01-31T15:43:53.000 回答