CSS | Scrollable Table Body

by Zoltan Boros

HTML

<div class="someContainer blue">
<label>Scrollable table: (without extra container)</label>
  <table class="myTable">
    <thead>
      <tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
    </thead>
    <tbody>
      <tr><td>mh qxw</td><td>KOtnQRrQ</td><td>bJlQHLU</td></tr>
      <tr><td>Hu TkQUEUwy</td><td>AcxOAv</td><td>Weh HJi</td></tr>
      <tr><td>OXb</td><td>xXKoPleL aN</td><td>FrjWqc</td></tr>
      <tr><td>acH Uu</td><td>fG</td><td>rryPfP mDXAJw</td></tr>
      <tr><td>yBea</td><td>JfVbvtDG</td><td>Oparr</td></tr>
      <tr><td>WrRt</td><td>im dVdlkFTx</td><td>oScUkI</td></tr>
      <tr><td>mdpc</td><td>xTska</td><td>OUsBKoUY</td></tr>
      <tr><td>iMcmb</td><td>VfFQrQGU GvUTyk</td><td>UJSSsN</td></tr>
      <tr><td>BQxDTd</td><td>kuKOf</td><td>vQxSaWO</td></tr>
      <tr><td>MSE</td><td>mByk</td><td>EjfplQsP</td></tr>
      <tr><td>JkjLxWf</td><td>wQfg oej</td><td>nd kRNy</td></tr>
      <tr><td>eLGrHr</td><td>rylYg Gy</td><td>CQtY WjAeJ</td></tr>
      <tr><td>eenOPKh OC</td><td>oT</td><td>an ctvhTdV</td></tr>
      <tr><td>XAcsJf</td><td>Ig llYWqgbv</td><td>bTPjhpC</td></tr>
      <tr><td>MEW</td><td>pQJQtJR</td><td>yoWg nn</td></tr>
      <tr><td>tpYvYb bEIJ</td><td>xwol</td><td>SEtMA nyMSLuMK</td></tr>
      <tr><td>LCx</td><td>TcGjT Owo</td><td>rauB QT</td></tr>
      <tr><td>wFnu kcsXflX</td><td>uiRhnwAU</td><td>cNHINNn</td></tr>
      <tr><td>XNbNhRbw Gdo</td><td>gDPRE</td><td>tPuCKi</td></tr>
      <tr><td>Seh</td><td>qcJTaIm EPlavG</td><td>iCvm oiii</td></tr>
      <tr><td>YgPAJQh KH</td><td>OIdOvED eXk</td><td>titrmuvx XckYv</td></tr>
      <tr><td>WFer iTY</td><td>ag VbbIq</td><td>vbynMavV ap</td></tr>
      <tr><td>jO</td><td>EK xtFERTBM</td><td>Rwh</td></tr>
      <tr><td>hYRbtP</td><td>tH MukF</td><td>HSlRqpCg OJdqdD</td></tr>
      <tr><td>sbiBPWP pni</td><td>TUmg twNThsga</td><td>iHcVxOqr</td></tr>
      <tr><td>qD</td><td>pFV</td><td>ETd qPNvbq</td></tr>
      <tr><td>LvfKGrOd</td><td>ds</td><td>KP Rm</td></tr>
     ...

CSS

/* main point */

table.myTable {
  display: block;
  overflow: auto;
  border-collapse: collapse;
}
table.myTable.scrollableBody {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
table.myTable.scrollableBody tbody {
  overflow: auto;
}
.myTable th, .myTable td {
  border: 1px solid #666;
}

/* auxiliary stuff */

* {
  box-sizing: border-box;
}
.someContainer {
  margin: 0 0 1rem 0;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-width: 2px;
  border-style: dashed;
}
.someContainer.blue {
  border-color: #88f;
}
.someContainer.green {
  border-color: #4a4;
}
.someContainer label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}
.someContainer.blue label {
  color: #88f;
}
.someContainer.green label {
  color: #4a4;
}