Table with scroll(body)

table with scroll for table body

by Mr_Vasu

HTML

<table class="tableSection">
  <thead>
    <tr>
      <th><span class="text">album</span>

      </th>
      <th><span class="text">song</span>

      </th>
      <th><span class="text">genre</span>

      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>album 0</td>
      <td>song0</td>
      <td>genre0</td>
    </tr>
    <tr>
      <td>album 1</td>
      <td>song 1</td>
      <td>genre1</td>
    </tr>
    <tr>
      <td>album2</td>
      <td>song 2</td>
      <td>genre2</td>
    </tr>
    <tr>
      <td>album3</td>
      <td>song 3</td>
      <td>genre3</td>
    </tr>
    <tr>
      <td>album4</td>
      <td>song 4</td>
      <td>genre 4</td>
    </tr>
    <tr>
      <td>album5</td>
      <td>song 5</td>
      <td>genre 5</td>
    </tr>
    <tr>
      <td>album 6</td>
      <td>song6</td>
      <td>genre6</td>
    </tr>
    <tr>
      <td>album 7</td>
      <td>song7</td>
      <td>genre7</td>
    </tr>
    <tr>
      <td>album8</td>
      <td>song8</td>
      <td>genre 8</td>
    </tr>
    <tr>
      <td>album9</td>
      <td>song9</td>
      <td>genre9</td>
    </tr>
    <tr>
      <td>album10</td>
      <td>song 10</td>
      <td>genre10</td>
    </tr>
    <tr>
      <td>album11</td>
      <td>song 11</td>
      <td>genre11</td>
    </tr>
    <tr>
      <td>album12</td>
      <td>song12</td>
      <td>genre12</td>
    </tr>
    <tr>
      <td>album 13</td>
      <td>song13</td>
      <td>genre13</td>
    </tr>
    <tr>
      <td>album14</td>
      <td>song14</td>
      <td>genre14</td>
    </tr>
    <tr>
      <td>album15</td>
      <td>song15</td>
      <td>genre15</td>
    </tr>
    <tr>
      <td>album 16</td>
      <td>song16</td>
      <td>genre16</td>
    </tr>
    <tr>
      <td>album 17</td>
      <td>song17</td>
      <td>genre17</td>
    </tr>
    <tr>
      <td>album18</td>
      <td>song18</td>
      <td>genre18</td>
    </tr>
    <tr>
      <td>album19</td>
      <td>song19</td>
      <td>genre19</td>
    </tr>
    <tr>
     ...

CSS

table.tableSection {
      display: table;
      width: 100%;
    }
    
    table.tableSection thead,
    table.tableSection tbody {
      float: left;
      width: 100%;
    }
    
    table.tableSection tbody {
      overflow: auto;
      height: 150px;
    }
    
    table.tableSection tr {
      width: 100%;
      display: table;
      text-align: left;
    }
    
    table.tableSection th,
    table.tableSection td {
      width: 33%;
    }