Загрузочный стол с фиксированными заголовками - угловой 5 - PullRequest
Новая
       12

Загрузочный стол с фиксированными заголовками - угловой 5

0 голосов
/ 28 мая 2018

Я создал таблицу с HTML и хочу, чтобы ее заголовок был исправлен (свитки могли бы повлиять только на тело).

Я нашел решение, и оно работает почти так, как я хочу. 

tbody {
  display:block;
  height:500px;
  overflow:auto;
}
thead, tbody tr {
  display:table;
  width:100%;
  table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
  width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
  width:400px;
}

Проблема в том, что с атрибутом table-layout: fixed он фиксирует ширину столбца, поэтому мои столбцы не отображаются должным образом (они перекрываются):

enter image description here

Как я могу это исправить?Я уже пробовал с четырьмя возможными значениями для таблица-макет

1 Ответ

0 голосов
/ 28 мая 2018

Использование td {word-wrap: break-word;}

tbody {
  display:block;
  height:500px;
  overflow:auto;
}
thead, tbody tr {
  display:table;
  width:100%;
  table-layout:fixed;/* even columns width , fix width of table too*/
}
td{
    word-wrap: break-word;
}
thead {
  width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
  width:400px;
}
<table class="a">
  <thead>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </thead>
  <tbody>
  <tr>
    <td>AlfredsFutterkisteghrtrh</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
    <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
    <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
    <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  </tbody>
</table>
...