How to add scrolling to table-row-group body of css based table

Issue

I am trying to create this:

I used the display: table property and table-header-group, table-row-group, table-row, table-cell css properties instead of using table tags.

When I add overflow-y: scroll to table-row-group nothing changes, and it activates the scroll of the card.

I removed the overflow of the card and still can't make the body of the table to scroll.

Why can't you do it with table-row-group?

I created a dummy jsfiddle, it looks differently but works the same, you can see the text overflowing outside.

Solution

I saw your code. The problem is that the overflow-y style must be added to .card class not .body class. It's because you want to scroll on the div with .card class. You can see the corrected style below.

.card {
    width: 400px;
    height: 400px;
    background: black;
    box-sizing: border-box;
    color: white;
    overflow-y: scroll;
  
    padding: 16px;
  
    .container {
      width: 100%;
      display: table;
      border-spacing: 8px;
      border-collapse: collapse;
  
      .header {
        color: var(--neutrals-70);
        display: table-header-group;
  
        .row {
          display: table-row;
          border-bottom: solid 1px var(--neutrals-40);
  
          .cell {
            display: table-cell;
            padding: 16px 0;
  
            .cell-container {
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
  
      .body {
        color: var(--neutrals-70);
        display: table-row-group;
        height: 10px;
  
        .row {
          display: table-row;
          vertical-align: center;
  
          .cell {
            display: table-cell;
            border-spacing: 0;
            padding: 4px 0;
            vertical-align: middle;
  
            .cell-container {
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
            }
          }
        }
  
      }
  
    }
  
 }

Answered By - Ali Sadeghi