Question

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

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

我希望它看起来像这样：

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

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

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

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

请参阅jsbin：http://jsbin.com/orayoy/1/edit

谢谢！

Answer 1

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

在第1列和第3列。你可能必须在第3列的按钮之间使用 ，而不是正面。

Answer 2

示例：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;

}

Answer 3

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

css表格单元格宽度太大

3 个答案: