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

Question

我在瀑布图中制作了条形图，我希望它们看起来像块状的块。它们是以编程方式设置为宽度并通过 margin-left 横向调整的内联块。

设置内部 HTML 的 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 到处都有不需要的 table 单元格填充，但不是在需要填充的第一列的单元格中。

我想要的是一个上下红色边框与其周围的黑色边框相接触的条形。

在Chrome和Firefox中都是一样的：第一个<td>中的padding会影响[=17]中的另一个<td> =]。为什么？如何更改此代码以在不丢失第一列中的填充的情况下在栏上方和下方没有 space？

Answer 1

一个 inner-block 被调整大小以适应它应该有填充的内容。

将栏上的 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 能够缩小边框以适合其内容，尽管周围有任何填充或边距。 在栏内添加与第一个单元格中相同的填充非常适合。

更具体地说，css 的 .bar-rule 中的 padding-top:20px 和 padding-bottom:20px 就可以了（因为我不确定填充是否会出错与宽度）。还在第二个单元格中添加 style='width:100%;' 以推动第一个单元格缩小。

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

How to set individual table cell padding?

html

html-table

padding

cellpadding

css-tables