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

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>

但是 table 宽度不起作用。当我尝试宽度超过 322px 时它起作用，但是当我尝试宽度 < 322px 时不起作用（我尝试 10px 但 table 没有变小）。我尝试宽度 > 33% 有效 < 33% 也无效。为什么？（主要宽度是80%是因为左边有aside和width 20%）

Answer 1

这是你需要的吗？...你设置 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>

Answer 2

这是由于行为 table 造成的，您不能将其宽度减小到小于其内容所需的宽度。

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

Automatic table layout algorithm (this is default):

The column width is set by the widest unbreakable content in the cells Can be slow, since it needs to read through all the content in the table, before determining the final layout

和

Fixed table layout algorithm:

The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells Allows a browser to lay out the table faster than the automatic table layout The browser can begin to display the table once the first row has been received

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>

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

Why width property doesn't work on my table?

html

css

html-table

css-tables

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

Why width property doesn't work on my table?

html

css

html-table

css-tables

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