为什么width属性在我的桌子上不起作用？

Question

我有这样的代码：

main {
  position: relative;
  width: 80%;
  float: right;
  height: auto;
}

div.container {
  width: 95%;
  height: auto;
  margin: 0 auto;
}

main div.container>table {
  width: 10px;
  overflow: hidden;
  background-color: red;
}

<main>
  <div class="container">
    <table>
      <thead>
        <tr>
          <th>Nama event</th>
          <th>Kategori event</th>
          <th>Keterangan event</th>
          <th>Waktu event</th>
          <th>Lokasi event</th>
          <th>Cover</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>something</td>
          <td>something</td>
          <td>something</td>
          <td>something</td>
          <td>something</td>
          <td>something</td>
        </tr>
      </tbody>
    </table>
  </div>
</main>

但是表格宽度不起作用。当我尝试宽度大于322px时，它可以工作，但是当我尝试宽度<322px不起作用时（我尝试10px，但table不会变小）。我尝试将宽度> 33％设为有效，将<33％设为无效。为什么？（主要的宽度为80％是因为，aside与width 20%在左侧）

Answer 1

这是由于行为表无法将其宽度减小到小于其内容所需的宽度。

要更改此设置table-layout，您需要将其设置为固定，因为默认情况下它是自动的，您可以在此处阅读：

自动表布局算法（这是默认设置）：

列宽由单元格中最坚不可摧的内容设置。可能很慢，因为它需要在确定最终布局之前通读表中的所有内容

和

固定表布局算法：

水平布局仅取决于表格的宽度和列的宽度，而不取决于单元格的内容。允许浏览器以比自动表格布局更快的速度摆放表格。浏览器可以在显示第一行后开始显示表格已收到

main {
  position: relative;
  width: 80%;
  float: right;
  height: auto;
}

div.container {
  width: 95%;
  height: auto;
  margin: 0 auto;
}

main div.container>table {
  width: 10px;
  overflow: hidden;
  background-color: red;
}  

<main>
  <div class="container">
    <table>
      <thead>
        <tr>
          <th>Keterangan event</th>
          <th>Waktu event</th>
          <th>Lokasi event</th>
          <th>Lokasi event</th>
          <th>Cover</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>something</td>
          <td>something</td>
          <td>something</td>
          <td>something</td>
          <td>something</td>
        </tr>
      </tbody>
    </table>
    after adding table-layout:fixed;
    <table style="table-layout:fixed;">
      <thead>
        <tr>
          <th>Keterangan event</th>
          <th>Waktu event</th>
          <th>Lokasi event</th>
          <th>Lokasi event</th>
          <th>Cover</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>something</td>
          <td>something</td>
          <td>something</td>
          <td>something</td>
          <td>something</td>
        </tr>
      </tbody>
    </table>

   
  </div>
</main>