force table elements to fill the full length of a table

Question

I know this problem has been asked several times, but even after reading answers here, I can't get it working. I want to have an HTML table, which:

• has pre-defined height and width
• its content (tbody) is scrollable vertically while table header remains fixed, therefore I use overflow-y:scroll;
• its columns have different width, e.g. specified by a percentage of the full length of a row
• no frameworks, just HTML+CSS

I've made several attempts and at some point, I was able to fill the full row with TD elements, but even then TDs were not properly aligned with respective TH elements. In another attempt, I was able to achieve what I need with {display: inline-block;} for TD and TH, but this required careful calculations of pixels to include border and padding. I need a more automated solution.

Code snippet

table {
      border-collapse: collapse;
      width: 100%;
      font: normal small/1.4 sans-serif;
      border: 1px solid #eee;
      border-bottom: 2px solid #00cccc;
      display:block;
      table-layout: fixed;
    }
    th, td {
      /*padding: 0.25rem;*/
      text-align: left;
      border: 1px solid #ccc;
      /*display: inline-block; */
    }
    th { 
        cursor: pointer; 
        background: #00cccc;
        color: #fff;
    }
    table tbody {
        overflow-y:scroll; 
        display:block;
    }
    table thead { display:block; }
    tbody tr {
        display:block;
    }
    tbody tr:nth-child(odd) {
      background: #f4f4f4;
    }
    tbody tr:hover {
        background: #ddd;
    }

 

    <table id="tbl" style="height: 400px;">
      <thead id="tbl-THEAD">
        <tr id="tbl-THEAD-TR">
          <th id="l1" style="width: 10%;">ligand</th>
          <th id="l2" style="width: 10%;">res id</th>
          <th id="l3" style="width: 10%;">P id</th>
          <th id="t1" style="width: 12.5%;">torsion 1</th>
          <th id="t2" style="width: 12.5%;">torsion 2</th>
          <th id="t3" style="width: 12.5%;">torsion 3</th>
          <th id="t4" style="width: 12.5%;">twist</th>
          <th id="f1" style="width: 10%;">flap 1</th>
          <th id="f2" style="width: 10%;">flap 2</th>
        </tr>
      </thead>
      <tbody id="tbl-TBODY" style="height: 400px;">
        <tr style="width: 100%;">
          <td>IPA</td>
          <td>446</td>
          <td>4fb0</td>
          <td> 60.1</td>
          <td> 2.8</td>
          <td> -62.0</td>
          <td> 1.4</td>
          <td> -30.1</td>
          <td> -31.4</td>
        </tr>
        <tr style="width: 100%;">
          <td>IPA</td>
          <td>448</td>
          <td>4e8n</td>
          <td> 64.2</td>
          <td> -2.3</td>
          <td> -60.7</td>
          <td> 5.1</td>
          <td> -30.6</td>
          <td> -32.4</td>
        </tr>
      </tbody>
    </table>