Почему ширина строки таблицы (tr) элемента таблицы не работает, а высота работает?

Question

Вот мой код:

.table1 {
  background-color: gray;
  display: flex;
  justify-content: ;
  align-items: ;
  height: 400px;
  margin-left: 40px;
  padding-left: ;
}

.table1 tr {
  background-color: blue;
  height: 50px;
  width: 50px;
}

<table class="table1">

  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>

  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>

  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>

</table>

Почему я могу изменить высоту «TR», но не могу изменить ширину?

И да, я знаю, что могу изменить ширину, используя отступы в родительском блоке, но почему это не работает, просто изменяя ширину самих элементов TR, как это происходит для высоты?

Answer 1

Как уже упоминалось, tr всегда составляет 100% ширины самой таблицы, но атрибут высоты регулируется. Вот почему атрибут высоты в вашем коде работает, а атрибут ширины - нет.

Чтобы настроить атрибуты ширины ваших столбцов, все, что вам нужно сделать, это настроить таргетинг на элемент th. Например, если вы добавите следующий код на лист CSS, вы увидите изменение ширины.

th {
  width:50px;
}

Или, для большей конкретности, вы можете сделать следующее.

.table1 tr th {
  width:50px;
}

Вы также можете иметь разную ширину для каждого столбца. Например, ваш столбец Имя может иметь размер 100 пикселей, а столбец Фамилия может иметь размер 150 пикселей. Это может быть go без слов, но общая суммарная ширина всех ваших столбцов не должна превышать ширину самой таблицы.

Answer 2

Попробуйте установить flex на tbody с flex-direction: column следующим образом:

.table1 tbody {
  background-color: gray;
  display: flex;
  justify-content: ;
  align-items: ;
  height: 400px;
  margin-left: 40px;
  padding-left: ;
  flex-direction: column;
}

.table1 tr {
  background-color: blue;
  height: 50px;
}
.table1 tr td, .table1 tr th {
  width: 150px;
  text-align: left;
}

<table class="table1">

  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>

  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>

  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>

</table>

Обратите внимание, что я только что добавил width к td и th.