Question

我想将宽度设置为th，并希望在td的下面从th继承宽度，我试图将width设置为th，但它不起作用。

Answer 1

从表中删除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>

如何设置表格的宽度，下面的td将继承宽度？

1 个答案: