如何设置单个表格单元格填充？

Question

我在瀑布图中制作了条形图，我希望它们看起来像块状。它们是内嵌块，以编程方式设置为宽度并通过左侧边距进行横向调整。

在这种情况下，设置 innerHTML 的 javascript 无关紧要，但我尝试过的最小 CSS 和 HTML 如下所示。运行这个 fiddle 看看它的样子：

      * { 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 中都是一样的：第一个 <td> 中的 padding 会影响 <tr> 中的另一个 <td>。为什么？如何更改此代码以在条形上方和下方没有空间而不会丢失第一列中的填充？

Answer 1

调整内部块的大小以适应应该具有填充的内容。

将栏上的padNotThisCell 更改为padThisCell 即可：

      * { 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;
      }

      .padThisCell{
        padding:20px;
      }

      .padNotThisCell{
        padding:0;
      }

    <br>
    <table cellspacing="0">
      <tr>
        <td class='padThisCell'>
          First column
        </td>
        <td class='padNotThisCell' style='width:100%;'>
          
          <div class='bar padThisCell' style='margin-left:30%; width:30%'> Bar </div>

          
        </td>
    </table>
    <br>

将padOnlyThisCell 重命名为padThisCell，因为它们现在位于两个位置。代码中的命名会影响思想。经常重命名是一个好的编程习惯。

第一个<td> 的填充不影响另一个<td> 的填充！要查看我从 this answer 获得的帮助：在 Chrome 中，打开检查器（F12 或右键单击 -> 检查元素），您可以在其中看到应用于元素的内容。

实际发生的情况是inline-block 能够缩小边框以适应其内容，尽管周围有任何填充或边距。 在栏内添加与第一个单元格中相同的填充可以完美匹配。

更具体地说，padding-top:20px 和 padding-bottom:20px 在 css 的 .bar-rule 中会起作用（因为我不知道填充是否会影响宽度）。还在第二个单元格中添加了style='width:100%;'，以推动第一个单元格收缩。