html - 宽度:自动不适用于内部表格

Question

我想将父级 (#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>

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

最好的问候

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