Table 单元格采用最小可能宽度

Question

在 table 中 table-layout 设置为 auto 和 width: 100%，是否可以指示 column/table 单元格采用尽可能小的宽度？例如，我有一列包含三个带有 white-space:nowrap 的操作按钮，我希望此 column/cells 的宽度足以在一行中显示三个按钮。

另一种方法是指示一列采用最大可能宽度。

Answer 1

尝试将一些边距设置为零。

button {
  margin: 0px;  
  }

td {
  margin: 0px;  
  }

<table cellspacing="0">
  <tr>
    <td>
      <button type="button">Button 1
      <button type="button">Button 2
      <button type="button">Button 3
    </td>
  </tr>
</table>

Answer 2

您可以将列宽设置为 0% 或 100%。呈现引擎将根据需要自动加宽窄列以适应内容。

这是一个 fiddle 演示行为：http://jsfiddle.net/nog2oqjx/

标记：

<table>
    <tr>
        <td>
            <button>1</button>
            <button>2</button>
            <button>3</button>
        </td>
        <td>
        </td>
    </tr>
</table>

样式：

table { width: 100%; }
tr  { width: 100%; }
td { width: 0%; background-color: green; padding: 10px; }
td:last-of-type { width: 100%; background-color: yellow; }
button { width: 40px;}

Table 单元格采用最小可能宽度

Table cell take minimum possible width

html

html-table

tablelayout