宽度：自动不适用于里面的表格

Posted 2023-03-06

【中文标题】宽度：自动不适用于里面的表格

【英文标题】：width: auto doesn't work with table inside

【发布时间】：2019-10-11 16:27:59

【问题描述】：

我想将父级 (#timer) 的宽度设置为自动，但不幸的是，内部表格会影响此父级的宽度并将其更改为 100% 宽度:(。

这是我的代码：

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;


html, body 
  height: 100%;


body 
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;


.time 
  margin: auto;
  border: 1px solid blue;


#clock 
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 100px;

  border: 1px solid red;



table 
  width: 100%;
  table-layout: fixed;


td 
  width: calc(100% / 3);
  text-align: center;


table, td 
  border: 1px solid #000;

<div class="time">
  <h1 id="clock">00 : 00 : 00</h1>
  <table>
    <tr>
      <td>hours</td>
      <td>minutes</td>
      <td>seconds</td>
    </tr>
  </table>
</div>

感谢您的帮助和解释:)。

最好的问候

【参考方案1】：

使用min-width 代替width 作为表格：

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box;


html, body 
  height: 100%;


body 
  display: flex;
  flex-direction: column;
  user-select: none;


.time 
  margin: auto;
  border: 1px solid blue;


#clock 
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 100px;

  border: 1px solid red;



table 
  min-width: 100%;
  table-layout: fixed;


td 
  width: calc(100% / 3);
  text-align: center;


table, td 
  border: 1px solid #000;

<div class="time">
  <h1 id="clock">00 : 00 : 00</h1>
  <table>
    <tr>
      <td>hours</td>
      <td>minutes</td>
      <td>seconds</td>
    </tr>
  </table>
</div>