Question

我在瀑布图中制作了条形图，希望彼此之间看起来像块状。它们是通过编程设置为一定宽度的内联块，并由左边距向侧面调整。

在这种情况下，设置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>。为什么？如何更改此代码，以免在栏的上方和下方没有空格，而又不会丢失第一栏中的填充？

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或右键单击-> inspect元素），然后您就可以看到正在应用到该元素的内容。 >

实际上发生的是，inline-block可以缩小边框以适合其内容，尽管周围有任何填充或空白。 在栏内添加与第一个单元格相同的填充物非常合适 。

更具体地说，在css的.bar-rule中使用padding-top:20px和padding-bottom:20px（因为如果填充不然会占用宽度，我不敢说）。在第二个单元格中还添加了style='width:100%;'，以推动第一个单元格缩小。

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

1 个答案: