html - 個々のテーブルセルのパディングを設定するには?

Question

互いにブロックのように見せたいウォーターフォール図のバーを作成しました。これらは、プログラムで幅に設定され、margin-left によって横方向に調整されるインライン ブロックです。

この場合、innerHTML を設定するための JavaScript は関係ありませんが、私が実験した最小限の CSS と HTML を以下に示します。このフィドルを実行して、どのように見えるかを確認します。

      * { padding:0; margin:0; }
      
      div { display:inline-block; }

      table {
        width:100%;
        white-space:nowrap;
        cellpadding:0;
      }

      td { border:solid 1px black; }
            
      .bar{
        margin:0;
        border:solid 1px red;
        background:yellow;
      }

      .padOnlyThisCell{
        padding:20px;
      }

      .padNotThisCell{
        padding:0;
      }

    <br>
    <table cellspacing="0">
      <tr>
        <td class='padOnlyThisCell'>
          First column
        </td>
        <td class='padNotThisCell'>
          
          <div class='bar padNotThisCell' style='margin-left:30%; width:30%'><sub> &nbsp; Why does this bar have margin? </sub></div>

          <sup> &nbsp; Why does this cell have padding?</sup>
          
        </td>
    </table>
    <br>

padding:0パディングが必要な最初の列のセルではなく、どこにでも不要な表セルのパディングがあります。

私が欲しいのは、上下の赤い境界線が周囲の黒い境界線に触れているバーです。

Chrome と Firefox の両方でpadding同じです<td><td><tr>。なんで？最初の列のパディングを失うことなく、バーの上と下にスペースがないようにこのコードを変更するにはどうすればよいですか?