Html Table

by brainsengineering

HTML

<div id="container">


<table class="table table-bordered border-0 undefined">
  <tbody>
    <tr class=" bg-info">
      <th colspan="2"></th>
      <th colspan="2" title="A">A</th>
      <th colspan="2" title="B">B</th>
      <th colspan="2" title="C">C</th>
      <th colspan="2" title="D">D</th>
      <th colspan="2" title="E">E</th>
      <th colspan="2" title="F">InFdia</th>
      <th colspan="2" title="G">G</th>
      <th colspan="2" title="H">H</th>
      <th colspan="2" title="Myanmar">Myanmar</th>
      <th colspan="2" title="Nepal">Nepal</th>
      <th colspan="2" title="Pakistan">Pakistan</th>
      <th colspan="2" title="Papua New Guinea">Papua New Guinea</th>
      <th colspan="2" title="Philippines">Philippines</th>
      <th colspan="2" title="Sri Lanka">Sri Lanka</th>
      <th colspan="2" title="Timor-Leste">Timor-Leste</th>
    </tr>
    <tr class=" bg-primary">
      <th colspan="2">Budget Required (USD)</th>
      <td colspan="2">5,143,035</td>
      <td colspan="2">2,623,151</td>
      <td colspan="2">170,439</td>
      <td colspan="2">1,483,083</td>
      <td colspan="2">515,732</td>
      <td colspan="2">607,073</td>
      <td colspan="2">698,702</td>
      <td colspan="2">1,129,961</td>
      <td colspan="2">831,500</td>
      <td colspan="2">2,011,353</td>
      <td colspan="2">1,837,684</td>
      <td colspan="2">0</td>
      <td colspan="2">569,983</td>
      <td colspan="2">970,655</td>
      <td colspan="2">1,011,800</td>
    </tr>
    <tr class=" bg-primary">
      <th colspan="2">Budget Required (Excluding staff)</th>
      <td colspan="2">3,230,300</td>
      <td colspan="2">1,289,828</td>
      <td colspan="2">49,000</td>
      <td colspan="2">1,157,610</td>
      <td colspan="2">348,408</td>
      <td colspan="2">453,656</td>
      <td colspan="2">346,202</td>
      <td colspan="2">513,500</td>
      <td colspan="2">751,500</td>
      <td colspan="2">1,399,784</td>
      <td colspan="2">1,056,834</td>
      <td colspan="2">0</td>
...

CSS

#container{width:300px;height:300px;padding:0;margin:0;}
table{width:100%;height:250px;  position: relative;
  border-collapse: collapse;padding:0;margin:0; }
table th{background:#69F;position:sticky;  top: 0;left:0;width:130px;}
table th.shift{left:89px;}