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

Posted 2023-03-06

【中文标题】为啥宽度属性在我的桌子上不起作用？

【英文标题】：Why width property doesn't work on my table?为什么宽度属性在我的桌子上不起作用？

【发布时间】：2018-06-11 12:13:49

【问题描述】：

我有这样的代码：

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

【参考方案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>

【参考方案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>

【讨论】：

你为什么猜他的意思是 td ？ :) 他经常使用 table 这个词，所以我很确定他的意思是 table

@TemaniAfif 因为那是导致问题的原因...将整个表格的宽度设置为 10px 的逻辑是什么？

他并没有尝试将其设置为 10 像素，因为您可以阅读他根本无法更改宽度（10 像素只是一个示例），这是由于表格的性质。即使是小的值也尝试改变元素的宽度是逻辑

感谢您的回答。但是对不起，当我尝试你的建议时。

宽度仍然不能手动更改小于 td 宽度需要。