ширина: авто не работает со столом внутри - PullRequest
Новая
       32

ширина: авто не работает со столом внутри

0 голосов
/ 25 мая 2019

Я бы хотел установить ширину родительского элемента (#timer) в значение auto, но, к сожалению, внутренняя таблица влияет на ширину этого родительского элемента и изменяет ее на ширину 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 Ответ

0 голосов
/ 25 мая 2019

Используйте 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>
...