Адаптивная таблица html

[kirilljs]

Если вдруг кто мучался как сделать адаптивную делюсь кодом, который сам периодически использую на проектах:

/*Для корректной работы fixed обязательно должна быть задана ширина таблицы */
table {
  table-layout: fixed;  
  width: 100%;
}
/* обрезаем текст, не влезающий в ячейку */
td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Основное различие между значениями auto(по умолч.) и fixed заключается в том, как браузер распределяет ширину столбцов в таблице. auto определяет ширину столбцов на основе их содержимого, тогда как fixed определяет их на основе ширины самой таблицы и заданных ширин столбцов

[kirilljs]

Есть еще один вариант, но более топорный через обертку таблицы в <div>:

<div class="table-responsive">
    <table class="table">
       // Таблица
    </table>
</div>

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
    margin: 20px 0;
}

.table {
    border-radius: 8px;
    border-spacing: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
    display: block;
    max-width: -moz-max-content;
    max-width: max-content;
    overflow: hidden;
    overflow-x: auto;
    table-layout: fixed;
    white-space: nowrap;
}

Топорно, но работает.
Единственное на мобилке в таком варианте если таблица находится внутри блока display:grid может возникать проблема со сдвигом.

А решается это очень просто, в мобилке просто где внутри блока с гридом лежит таблица делаем display: block; :

.grid {
    display: block;
}

@media (min-width: 552px) {
    .grid {
      display: grid;
    }
}

[kirilljs]

Еще один вариант, как на нашем форуме реализованы таблица:

.table {
      border-collapse: separate;
      border-spacing: 0;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      overflow: hidden;
    }
    .table thead tr th {
      background: rgb(44, 62, 88);
      color: white;
    }
    .table th, .table td {
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid #f0f0f0;
      white-space: normal;
      font-size: 14px;
      color: #000;
    }
    
    .table thead tr th:first-child {
      border-top-left-radius: 8px;
    }
    .table thead tr th:last-child {
      border-top-right-radius: 8px;
    }
    .table tbody tr:last-child td:first-child {
      border-bottom-left-radius: 8px;
    }
    .table tbody tr:last-child td:last-child {
      border-bottom-right-radius: 8px;
    }

Для примера:

1	2	3	4	5
1	1	1	1	1
2	2	2	2	2
3	3	3	3	3

[Jspi]

Пользователь @kirilljs написал в Адаптивная таблица html:

text-overflow: ellipsis;

а это разве не скроет текст, который не влезает?

В этом случае получится, что содержимое в ячейке ты не сможешь прочитать полностью