Question 232020 in CSS Question posted in
Some basic documentation can be found here.

Css – Creating a Scrollable tbody without Distorting the tbody Columns

I’m trying to get a scroll in the tbody (required to run a react package).

The problem is that to get the scrollable tbody, the only way I found is to use display: block on tbody and that maps my whole tbody to the first column of the thead.

Is there a way to have a scrollable tbody without having this problem?

Codepen if needed.

table {
  width: 100%
}

th {
  background-color: green;
}

td {
  background-color: red;
}

table {
    width: 100%;
  table-layout: fixed;
}

tbody {
    display: block;
    height: 300px;
    width: 100%;
    overflow-y: auto;
}

tr,
td {
    height: 60px;
}
<table>
<thead>
  <tr>
    <th>Col1</th>
    <th>Col2</th>
    <th>Col3</th>
    <th>Col4</th>
    <th>Col5</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>Row1Col5</td>
  </tr>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>RowCol5</td>
  </tr>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>RowCol5</td>
  </tr>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>RowCol5</td>
  </tr>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>RowCol5</td>
  </tr>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>RowCol5</td>
  </tr>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>RowCol5</td>
  </tr>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>RowCol5</td>
  </tr>
  <tr>
    <td>RowCol1</td>
    <td>RowCol2</td>
    <td>RowCol3</td>
    <td>RowCol4</td>
    <td>RowCol5</td>
  </tr>
</tbody>
</table>
Tags:

2

Answers


  1. 0

    I made some revision to the code, hope it works.

    table {
        width: 100%;
    }

    th {
        background-color: green;
    }

    td {
        background-color: red;
        width: 20vw;
    }

    table {
        width: 100%;
        table-layout: fixed;
    }
    thead {
        position: relative;
        width: 100%;
    }
    tbody {
        display: block;
        height: 300px;
        width: 100%;
        overflow-y: auto;
        position: absolute;
    }

    tr,
    td {
        height: 60px;
    }
    <table>
    <thead>
        <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
        <th>Col4</th>
        <th>Col5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>RowCol1</td>
        <td>RowCol2</td>
        <td>RowCol3</td>
        <td>RowCol4</td>
        <td>Row1Col5</td>
        </tr>
        <tr>
        <td>RowCol1</td>
        <td>RowCol2</td>
        <td>RowCol3</td>
        <td>RowCol4</td>
        <td>RowCol5</td>
        </tr>
        <tr>
        <td>RowCol1</td>
        <td>RowCol2</td>
        <td>RowCol3</td>
        <td>RowCol4</td>
        <td>RowCol5</td>
        </tr>
        <tr>
        <td>RowCol1</td>
        <td>RowCol2</td>
        <td>RowCol3</td>
        <td>RowCol4</td>
        <td>RowCol5</td>
        </tr>
        <tr>
        <td>RowCol1</td>
        <td>RowCol2</td>
        <td>RowCol3</td>
        <td>RowCol4</td>
        <td>RowCol5</td>
        </tr>
        <tr>
        <td>RowCol1</td>
        <td>RowCol2</td>
        <td>RowCol3</td>
        <td>RowCol4</td>
        <td>RowCol5</td>
        </tr>
        <tr>
        <td>RowCol1</td>
        <td>RowCol2</td>
        <td>RowCol3</td>
        <td>RowCol4</td>
        <td>RowCol5</td>
        </tr>
        <tr>
        <td>RowCol1</td>
        <td>RowCol2</td>
        <td>RowCol3</td>
        <td>RowCol4</td>
        <td>RowCol5</td>
        </tr>
        <tr>
        <td>RowCol1</td>
        <td>RowCol2</td>
        <td>RowCol3</td>
        <td>RowCol4</td>
        <td>RowCol5</td>
        </tr>
    </tbody>
    </table>
    Login or Signup to reply.
  2. 0

    You can set the display of the thead as block as well and then give a width to each th and td to cover the total width as per your need.

    div thead{
    display: block;
}

th {
    width: 18.8vw;
}

td {
    width: 18.8vw;
}

    table {
    width: 100%;
    /*   table-layout: fixed; */        
}

tr,
td {
    height: 60px;
}

div {
    overflow: auto;
    height: 100px;
}

div thead{
    display: block;
}

div thead th {
    position: sticky;
    top: 0;
}

th {
    background-color: green;
    width: 18.8vw;
}

td {
    background-color: red;
    width: 18.8vw;
}

tbody {
    display: block;
    height: 300px;
    width: 100%;
    overflow-y: auto;
}
    <div>
    <table>
      <thead>
        <tr>
          <th>Col1</th>
          <th>Col2</th>
          <th>Col3</th>
          <th>Col4</th>
          <th>Col5</th>
        </tr>
      </thead>
      <tbody>
            <tr>
          <td>RowCol1</td>
          <td>RowCol2</td>
          <td>RowCol3</td>
          <td>RowCol4</td>
          <td>Row1Col5</td>
        </tr>
                <tr>
          <td>RowCol1</td>
          <td>RowCol2</td>
          <td>RowCol3</td>
          <td>RowCol4</td>
          <td>RowCol5</td>
        </tr>
                <tr>
          <td>RowCol1</td>
          <td>RowCol2</td>
          <td>RowCol3</td>
          <td>RowCol4</td>
          <td>RowCol5</td>
        </tr>
                <tr>
          <td>RowCol1</td>
          <td>RowCol2</td>
          <td>RowCol3</td>
          <td>RowCol4</td>
          <td>RowCol5</td>
        </tr>
                <tr>
          <td>RowCol1</td>
          <td>RowCol2</td>
          <td>RowCol3</td>
          <td>RowCol4</td>
          <td>RowCol5</td>
        </tr>
                <tr>
          <td>RowCol1</td>
          <td>RowCol2</td>
          <td>RowCol3</td>
          <td>RowCol4</td>
          <td>RowCol5</td>
        </tr>
                <tr>
          <td>RowCol1</td>
          <td>RowCol2</td>
          <td>RowCol3</td>
          <td>RowCol4</td>
          <td>RowCol5</td>
        </tr>
                <tr>
          <td>RowCol1</td>
          <td>RowCol2</td>
          <td>RowCol3</td>
          <td>RowCol4</td>
          <td>RowCol5</td>
        </tr>
                <tr>
          <td>RowCol1</td>
          <td>RowCol2</td>
          <td>RowCol3</td>
          <td>RowCol4</td>
          <td>RowCol5</td>
        </tr>
      </tbody>
    </table>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search