Search code examples
htmlcssgridoverflow

Border-bottom not visible for overflowed row in Grid

I am using grid to present table. Applied overflow-x to auto, it is working fine but content which is being overflowing isn't rendering border-bottom.

FYI, border bottom is visible for whatever part is showing without overflow.

Codesandbox linnk - https://codesandbox.io/p/sandbox/grid-overflow-issue-ckjz5n?file=%2Findex.html%3A38%2C15

Issue

Issue

Solution

  • The easiest fix is to select the cell not the row like this.

    .tableHeaderCell {
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid rgb(103, 102, 102);
}

.tableBodyCell {
  border-bottom: 1px solid rgb(192, 192, 192);
  font-size: 14px;
}

    This is a live preview: Link But I suggest using the table, th, tr, and td HTML tags it makes the code more clean and easier to work around it. This is a cool documentation for it: Link