Question 44155 in Html Question posted in
Some basic documentation can be found here.

overflow-y not working with grid and max-height – Html

I have a table inside a grid and I want the table to have max-height, and when it is over the max height add scrollbar. It doesn’t seem to work in this case where I use grid:

.orders {
  --orders-columns: 1;
  display: grid;
  grid-template-columns: repeat(var(--orders-columns), auto);
  column-gap: 2rem;
}

@media (min-width: 600px) {
  .orders {
    --orders-columns: 2;
  }
}

.orders__title {
  font-weight: bold;
}

.orders__filters {
  display: flex;
  align-items: flex-start;
}

@media (min-width: 600px) {
  .orders__filters {
    justify-content: flex-end;
  }
}

.orders__filter-label {
  display: block;
  padding-right: 0.5rem;
}

.orders__filter+.orders__filter-label {
  padding-left: 1rem;
}

.orders__table {
  grid-column: 1 / -1;
  border-collapse: collapse;
  max-height: 10px;
  overflow-y: auto;
}

.orders__table th {
  text-align: left;
}

.orders__table th:last-child,
.orders__table td:last-child {
  text-align: right;
}
<figure class='orders'>
  <figcaption class='orders__title'>My Orders Table</figcaption>
  <div class='orders__filters'>
    <label class='orders__filter-label' for='year-select' aria-label='Filter orders by year'>Year</label>
    <select class='orders__filter' name='year-select' id='year-select'>
      <option></option>
      <option value='2014'>2014</option>
      <option value='2015'>2015</option>
      <option value='2016'>2016</option>
      <option value='2017'>2017</option>
      <option value='2018'>2018</option>
      <option value='2019'>2019</option>
      <option value='2020'>2020</option>
      <option value='2021'>2021</option>
      <option value='2022'>2022</option>
      <option value='2023'>2023</option>
    </select>
    <label class='orders__filter-label' for='month-select' aria-label='Filter orders by month'>Month</label>
    <select class='orders__filter' name='month-select' id='month-select'>
      <option></option>
      <option value='1'>Janaury</option>
      <option value='2'>February</option>
      <option value='3'>March</option>
      <option value='4'>April</option>
      <option value='5'>May</option>
      <option value='6'>June</option>
      <option value='7'>July</option>
      <option value='8'>August</option>
      <option value='9'>September</option>
      <option value='10'>October</option>
      <option value='11'>November</option>
      <option value='12'>December</option>
    </select>
  </div>
  <table class='orders__table'>
    <thead>
      <th>Date</th>
      <th>Amount</th>
      <th>Comment</th>
    </thead>
    <tbody>
      <tr>
        <td>5.5.2020</td>
        <td>$50</td>
        <td>some_comment</td>
      </tr>
      <tr>
        <td>1.12.2022</td>
        <td>$10</td>
        <td>some_comment</td>
      </tr>
      <tr>
        <td>1.1.2023</td>
        <td>$33</td>
        <td>some_comment</td>
      </tr>
      <tr>
        <td>1.1.2023</td>
        <td>$33</td>
        <td>some_comment</td>
      </tr>
      <tr>
        <td>1.1.2023</td>
        <td>$33</td>
        <td>some_comment</td>
      </tr>
      <tr>
        <td>1.1.2023</td>
        <td>$33</td>
        <td>some_comment</td>
      </tr>
    </tbody>
  </table>
</figure>
Tags:

2

Answers


  1. 0

    It’s better to don’t use grid and table together and you shuld define max height and overfllow-y:scroll to your parent div and want to scroll inside it

    Login or Signup to reply.
  2. 0

    It is because the <table> element has display: table by default. If you change it to display: block, it will work as expected but your table will no longer be a table. One solution to this would be to wrap your table inside a div and set max-height and overflow-y on that div element.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search