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

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 时它可以工作，但是当我尝试宽度 table 不会变小）。我尝试将宽度 > 33% 它的工作 aside和width 20%）

Answer 1

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

为了能够更改此设置，您需要将 table-layout 设置为固定，默认情况下它是自动的，您可以阅读 here：

自动表格布局算法（默认）：

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

和

固定表格布局算法：

水平布局只取决于 表格的宽度和列的宽度，而不是 单元格允许浏览器比 自动表格布局浏览器可以开始显示表格一次 第一行已收到

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>

Answer 2

这是你需要的吗？...你设置 Table->width : 10px ..... 我猜你的意思是 td->width: 10px ..

.main {
 
  width: 100%;
  
 
}
div.container {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
div.container > table {
  width: 90%;
  overflow: hidden;
  background-color: red;
}

<div class="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>
</div>