将div宽度调整为一个孩子，但不调整其他孩子的宽度

Question

我在div内有一个表，我希望该表在调整其大小时控制div的宽度。我正在使用display：inline-block;在div上使div与其内容一致，但这使其与最宽的元素一致，该元素可能并不总是表格。

[如何使其他所有子项都必须符合桌子的宽度？假设我在表格下方有一个文本输入框和一个按钮，如果表格足够宽，它们可能在同一行中，但是如果表格缩小，则它们也应该缩小或将其撞到下一行。

https://jsfiddle.net/0y5j7oq9/2/

    <div>
  <table>
    <thead>
      <th colspan="3">Table</th>
    </thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <input type="text">
  <input type="button" value="Press Me">
</div>

table,
td,
th {
  border: 1px solid black;
}

div {
  display: inline-block;
  border: 1px solid black;
}

在jsfiddle中，div周围的边框应该适合表格，而不适合表格下方的元素。这些元素应符合表格的宽度。

Answer 1

给表width: 100%。

table {
  width: 100%;
}

table,
td,
th {
  border: 1px solid black;
}

div {
  display: inline-block;
  border: 1px solid;
}

<div>
  <table>
    <thead>
      <th colspan="3">Table</th>
    </thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <input type="text">
  <input type="button" value="Press Me">
</div>