宽度：自动不适用于内部表格

Question

我想将父级（#timer）的宽度设置为auto，但是不幸的是，表内部会影响此父级的宽度并将其更改为100％width：（。

这是我的代码：

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