Question

我有这样的代码：

<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>

CSS

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;
}

但是表格宽度不起作用。当我尝试超过322px的宽度时它可以工作，但当我尝试宽度＆lt; 322px不起作用（我尝试10px，但table不会变小）。我尝试宽度＆gt; 33％它的工作＆lt; 33％它也不起作用。为什么？（主要宽度为80％是因为左侧有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-＆gt; width：10px .....我猜你的意思是td-＆gt; 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>

Css宽度在我的桌子上不起作用

2 个答案: