Как правильно сжимать столбцы таблицы - PullRequest
Новая
       13

Как правильно сжимать столбцы таблицы

0 голосов
/ 30 марта 2019

Мои пользователи будут посещать мою веб-страницу с мониторами в диапазоне от 11 'до 15', поэтому я надеюсь, что моя страница будет адаптирована к разрешению экрана.

У меня есть table с несколькими столбцами.При уменьшении ширины экрана столбцы могут уменьшаться до ellipsis (первое слово с 3 точками) в указанном порядке.

Например, у меня есть table из Employee со столбцами id, name, department, title, manager и on-board date.

Поскольку ширина экрана становится меньше, я хочу, чтобы столбец on-board date уменьшился до первого с другими без изменений доellipsis минимальная ширина.Затем столбец manager сжимается, затем столбец title сжимается.

Надеюсь, я смогу добиться этого без медиазапроса.

1 Ответ

0 голосов
/ 30 марта 2019

Вам нужно будет обернуть текст внутри <td> в пределах интервала, чтобы многоточие могло вступить в силу. Более того, вам также нужно установить table-layout:fixed, чтобы установить фиксированную ширину таблицы / ячейки для всех столбцов.

См. Пример ниже 

table{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
max-width: 100%; /*Remove if not required*/
}
table td, table th{
  border: 1px solid #ccc;
}
table td span{
display: block;
text-overflow: ellipsis;
  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}
<table>
<tr> 
<th> <span> ID  </span> </th>
<th> <span> Username </span> </th>
<th> <span> Email Address </span> </th>
<th> <span> Designation </span> </th>
<th> <span> Address </span> </th>
</tr>
<tr> 
<td> <span> 01  </span> </td>
<td> <span> Username01 </span> </td>
<td> <span> longemailddress@domain.com </span> </td>
<td> <span> long long designation </span> </td>
<td> <span> Some street, Address, City, state, Country </span> </td>
</tr>
<tr> 
<td> <span> 02  </span> </td>
<td> <span> Username01 </span> </td>
<td> <span> longemailddress@domain.com </span> </td>
<td> <span> long long designation </span> </td>
<td> <span> Some street, Address, City, state, Country </span> </td>
</tr>
<tr> 
<td> <span> 03  </span> </td>
<td> <span> Username01 </span> </td>
<td> <span> longemailddress@domain.com </span> </td>
<td> <span> long long designation </span> </td>
<td> <span> Some street, Address, City, state, Country </span> </td>
</tr>

</table>

И если вы хотите настроить ширину таблицы в соответствии с порядком столбцов, вы можете использовать псевдоклассы CSS. Например, используйте это, чтобы увеличить ширину 2-го столбца 

table td:nth-child(2){
    width: 150px;
}

Вы также можете использовать гибкую рамку CSS для управления настройкой таблицы.

...