Отделить Tr от адаптивной таблицы

У меня есть таблица, которую я создаю с помощью CSS Grid для адаптивного макета. Но на маленьких экранах заголовки столбцов перекрываются, даже если вы используете переполнение-х: авто;.

Как сделать так, чтобы он не включался?

Код:

<div class = "table container">

    <table>
        <thead>
            <tr>
            <th>Month</th>
            <th>Savings</th>
            <th>Savings</th>
            <th>Savings</th>
            <th>Savings</th>
            </tr>
        </thead>
        <tbody style = "overflow-x:auto;">
            <tr>
            <td>January</td>
            <td>$100</td>
            <td>$100</td>
            <td>$100</td>
            <td>$100</td>
            </tr>
        </tbody>
    </table>
</div>

CSS:

  table {
    margin: 2rem 0 2rem 0;
    border-collapse: collapse;
    border-spacing: 0;
    width: fit-content;
    overflow-x: auto;
    display:grid;
    grid-template-columns: 100px 1fr;

        thead {

            tr {
              display:grid;
              grid-gap: 1rem;
              grid-auto-flow: column;
              grid-template-rows: repeat(5, .5fr);
              justify-content: center;
              align-items: center;
              text-align: center;
              font-size: .9rem;
            }
        }

        tbody {
          display:grid;
          grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));

          tr {
            display:grid;
            grid-auto-flow: column;
            grid-template-rows: repeat(5, 1fr);
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: .9rem;
          }
        }
      }

Вот изображение того, что происходит:

Изображение. Отделить Tr от адаптивной таблицы

css html-table css-grid

29.05.2019 08:22

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

CSS-сетка уже отображается как HTML-таблица.

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

Код:

<div class = "grid-table">
  <div>Month</div>
  <div>Savings</div>
  <div>Savings</div>
  <div>Savings</div>
  <div>Savings</div>
  <div>January</div>
  <div>$100</div>
  <div>$100</div>
  <div>$100</div>
  <div>$100</div>
</div>

CSS:

.grid-table {
  margin: 2rem 0 2rem 0;
  border-collapse: collapse;
  border-spacing: 0;
  width: fit-content;
  overflow-x: auto;
  display:grid;
  grid-template-columns: 100px 1fr;
  grid-gap: 1rem;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, .5fr);
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: .9rem;
}

Я предложил сделать это в ваш день, потому что это было проще. Спасибо!

— 30.05.2019 06:26

29.05.2019 09:46