Как я могу установить ширину th таблицы, и td ниже будет наследовать ширину? - PullRequest
Новая
       4

Как я могу установить ширину th таблицы, и td ниже будет наследовать ширину?

0 голосов
/ 18 февраля 2020

Я хочу установить ширину для моего th и хочу, чтобы значения td были ниже, чтобы наследовать ширину от th, я попытался установить ширину для th, но это не работает.

1 Ответ

0 голосов
/ 18 февраля 2020

удалить min-width из таблицы и добавить width:100%. Установите ширину для th, она будет работать 

    div {
      border: 1px solid rgba(0,0,0,.12);
      border-radius: 4px;

      -webkit-overflow-scrolling: touch;
      display: inline-flex;
      flex-direction: column;
      box-sizing: border-box;
      overflow-x: auto;
    }
    table {
      font-family: Roboto, sans-serif;
      /* min-width: 100%; */
      border-collapse: collapse;

      width: 100%;
      white-space: nowrap;
      border-collapse: collapse;
      table-layout: fixed;
    }
    thead tr {
      border: 0;
    }
    tr {
      border-top: 1px solid rgba(0,0,0,.12);
    }
    th {
      font-weight: 500;
      height: 56px;
      line-height: 1.375rem;
      letter-spacing: .0071428571em;
      width: 8rem
    }
    td {
      font-weight: 400;
      height: 52px;
      line-height: 1.25rem;
      letter-spacing: .0178571429em;
    }
    td, th {
      padding: 0px 16px;
      text-align: left;
      font-size: .875rem;
      text-overflow: ellipsis;
      overflow: hidden;  
    }
<div>
  <table>
    <thead>
      <tr>
        <th>ФИО</th>
        <th>Статус по Т.Д.</th>
        <th>Статус работника</th>
        <th>Должность</th>
        <th style="
">Подразделение</th>
        <th>Вид занятости</th>
        <th>Ставка</th>
        <th>Трудовой договор</th>
        <th>Приказ</th>
        <th>Основание</th>
        <th>Период работы</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="3">Иванов Иван Иванович<arrow-button-component></arrow-button-component>
        </td>
        <td>Действующий</td>
        <td>На работе</td>
        <td>руководитель отдела разработки</td>
        <td>Департмент информационых технологии</td>
        <td>Основое</td>
        <td>1</td>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</td>
        <td>Приказ о расторжении дополнительного соглашения</td>
        <td>Заявление. Статьи 34 и 36 Трудового кодекса Республики Казахстан</td>
        <td>с 15.11.2019 по 23.06.2020</td>
      </tr>
      <tr>
        <td>Действующий</td>
        <td>На работе</td>
        <td>руководитель отдела разработки</td>
        <td>Департмент информационых технологии</td>
        <td>Основое</td>
        <td>1</td>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</td>
        <td>Приказ о расторжении дополнительного соглашения</td>
        <td>Заявление. Статьи 34 и 36 Трудового кодекса Республики Казахстан</td>
        <td>с 15.11.2019 по 23.06.2020</td>
      </tr>
      <tr>
        <td>Расторгнут</td>
        <td>Уволен/а</td>
        <td>руководитель отдела разработки</td>
        <td>Департмент информационых технологии</td>
        <td>Основое</td>
        <td>1</td>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</td>
        <td>Приказ о расторжении дополнительного соглашения</td>
        <td>Заявление. Статьи 34 и 36 Трудового кодекса Республики Казахстан</td>
        <td>с 15.11.2019 по 23.06.2020</td>
      </tr>
      <tr>
        <td rowspan="1">Анна Иванович<arrow-button-component></arrow-button-component>
        </td>
        <td>Действующий</td>
        <td>Уволен/а</td>
        <td>руководитель отдела разработки</td>
        <td>Департмент информационых технологии</td>
        <td>Основое</td>
        <td>1</td>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</td>
        <td>Приказ о расторжении дополнительного соглашения</td>
        <td>Заявление. Статьи 34 и 36 Трудового кодекса Республики Казахстан</td>
        <td>с 15.11.2019 по 23.06.2020</td>
      </tr>
      <tr>
        <td rowspan="2">Алишер Казболдинов<arrow-button-component></arrow-button-component>
        </td>
        <td>Действующий</td>
        <td>На работе</td>
        <td>руководитель отдела разработки</td>
        <td>Департмент информационых технологии</td>
        <td>Основое</td>
        <td>1</td>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</td>
        <td>Приказ о расторжении дополнительного соглашения</td>
        <td>Заявление. Статьи 34 и 36 Трудового кодекса Республики Казахстан</td>
        <td>с 15.11.2019 по 23.06.2020</td>
      </tr>
      <tr>
        <td>Расторгнут</td>
        <td>Уволен/а</td>
        <td>руководитель отдела разработки</td>
        <td>Департмент информационых технологии</td>
        <td>Основое</td>
        <td>1</td>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since</td>
        <td>Приказ о расторжении дополнительного соглашения</td>
        <td>Заявление. Статьи 34 и 36 Трудового кодекса Республики Казахстан</td>
        <td>с 15.11.2019 по 23.06.2020</td>
      </tr>
    </tbody>
  </table>


</div>
...