Question

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

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

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％。渲染引擎将根据需要自动扩展窄列以适合内容。

这是演示行为的小提琴：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;}

表格单元格占用最小宽度

2 个答案: