Отдельно Tr от отзывчивого стола - PullRequest
Новая
       24

Отдельно Tr от отзывчивого стола

1 голос
/ 29 мая 2019

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

Как я могу заставить его не включаться?

Код: 

<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;
          }
        }
      }

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

Изображение. enter image description here

1 Ответ

1 голос
/ 29 мая 2019

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;
}
...