html - 表应仅根据需要宽

Question

我希望 HTML<table>的大小正好是它需要的大小。

如果不指定任何内容，它将跨越整个宽度。设置width="auto"不起作用。

Answer 1

根本不要在桌子上设置宽度。这将使表格仅根据其内容的需要而变宽。如果这看起来太宽，请查看表格内容以了解导致单元格宽度要求的原因。例如，如果单元格中有长文本，它将在可用宽度内将单元格扩展为所需的宽度。如果您希望限制这一点，您需要设置width或设置max-width单元格的内容、单元格本身或表格。

Answer 2

您需要使用 CSS 样式而不是表格属性。

table
{
width:auto;
}

Answer 3

用于width: fit-content;餐桌。请参阅下面的区别：

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

.container {
  width: 300px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}

table#fit-content {
  width: fit-content;
}

<div class='container'>
  <button>Regular</button>
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
        <tr>
        <td>4</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>
<br>
<div class='container'>
  <button>With Fit-Content</button>
  <table id='fit-content'>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
        <tr>
        <td>4</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>