css Question posted in
Some basic documentation can be found here.

Css – Overflow Styling Lost When Scrolling

I have a standard table which consists of a header row and n-data rows. The width of the table exceeds the size of the container in which it resides. I have styling on the header row (white background) which seems to truncate at the end of the viewable table. The overflow portion of the table does not seem to have the style applied. Is there something I am missing?

CSS

.grid-wrapper {
    overflow-x: scroll;
    text-align: center;

    > .gt-header {
        font-weight: bold;
        background-color: white;
        border-bottom: 1px solid black;
    }

    #training {
        display: grid;
        grid-template-columns: $grid-psta-training
    }
    #training-data > div {
        display: grid;
        grid-template-columns: $grid-psta-training;
        text-align: center;
    }
}

I used min-width: 100% with the hope that the styling would apply to the overflow area but with not luck. The area is left un-styled.

Codepen Example: https://codepen.io/dmytrie/pen/jOjGeXE
If you scroll you’ll notice the light green background-color is truncated which is undesirable.

Update 2:
After playing around with it further it seems that the issue stems from the grid-template-column sizes. If the number of columns and its widths exceed the size of the viewport then the styling is truncated if and only if the last template-column value is a non-fractional unit. Is there any properties we can use to ignore that. I’m open to using definite pixel sizes but that is really undesirable.

Tags:

2

Answers


  1. 0

    Initially, it appears there may be a structural issue with your HTML.

    .grid-wrapper {
overflow-x: auto;
text-align: center;
white-space: nowrap;

>.gt-header {
    font-weight: bold;
    background-color: white;
    border-bottom: 1px solid black;
    position: sticky;
    top: 0;
    z-index: 1;
}

#training {
    display: grid;
    grid-template-columns: var(--grid-psta-training);
    width: max-content;
}} #training-data > div {

display: grid;
grid-template-columns: var(--grid-psta-training);
text-align: center;}
    Login or Signup to reply.
  2. 0 
    <table class="grid-wrapper">
    <thead >
      <tr id="training" class="gt-header">
        <th></th>
        <th>Course</th>
        <th>Registered Date</th>
        <th>Start Date</th>
        <th>End Date</th>
        <th>Completed</th>
        <th>Comments</th>
      </tr>
    </thead>
    <tbody style="background-color: lightgreen;">
      <tr id="training-data" >
        <td>
          <i>{{ F.A.Icon }}</i>
        </td>
        <td>Description</td>
        <td>9/25/2011</td>
        <td>10/1/2011</td>
        <td>11/15/2011</td>
        <td>No</td>
        <td>N/A</td>
      </tr>
    </tbody>
  </table>

.grid-wrapper {
  overflow-x: scroll;
  overflow-style: all;
  text-align: center;
  white-space: nowrap;
  padding-bottom: 1rem;
  width: 100%;
}

.grid-wrapper>.gt-header {
  display: grid;
  grid-template-columns: 25px minmax(0, 0.75fr) minmax(0, 0.75fr) minmax(0, 0.75fr) minmax(0, 0.75fr) minmax(0, 1fr) minmax(0, 20px);
  font-weight: bold;
  background-color: white;
  border-bottom: 1px solid black;
  position: sticky;
  top: 0;
  z-index: 1;
}

.grid-wrapper #training {
  grid-template-columns: 25px minmax(0, 0.75fr) minmax(0, 0.75fr) minmax(0, 0.75fr) minmax(0, 0.75fr) minmax(0, 1fr) minmax(0, 20px);
  overflow-style: all;
}

.grid-wrapper #training-data {
  width: 100%;
}

.grid-wrapper #training-data>td {
  background-color: red;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search