1

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

在这种情况下，设置 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>为什么？如何将此代码更改为在条形图上方和下方没有空间而不会丢失第一列中的填充？

4

1 回答 1

0

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

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因为它们现在在两个地方。代码中的命名会影响思想。经常重命名是一个好的编程习惯。

first 的填充<td>不影响 other 的填充<td>！为了看到我从这个答案中得到了帮助： 在 Chrome 中，打开检查器（F12 或右键单击 -> 检查元素），在那里你可以看到应用于元素的内容。

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

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

于 2019-06-04T22:28:27.117 回答