Question

我正在尝试采用类似于表格的布局，药物名称显示在左侧，数据占据了表格的其余部分。简单地说：

           +-------------+------------+
medicine 1 |  some data  | some data  |
           +-------------+------------+
medicine 2 |  some data  | some data  |
           +-------------+------------+

由于我想保持数据网格的动态性，因此我将两个<div>的样式为display:table-cell用作两个容器，左边的代表所有药品名称，右边的代表药品名称。数据网格。这两个表单元格<div>中有多个内部<div>内部，但是我不确定为什么当我使用Chrome的检查界面进行操作时，左侧的顶部上方有一个较大的填充区域调查一下（请参见下图）：

我不太确定哪个部分出了问题，并且inspect接口没有给我看似相关的信息。我想学习如何处理这种情况。这是供您参考的html代码：

<div style="display:table">
  <div style="display:table-row">
    <div style="display:table-cell">
      <div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
        Dexedrine Spansules (Dextroamphetamine, ER) <br/><span style="font-style:italic">(20mg)</span>
      </div>
      <div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
        Methamphetamine (Desoxyn, IR) <br/><span style="font-style:italic">(15mg)</span>
      </div>
    </div>
    <div style="display:table-cell; overflow:hidden; max-width:800px">
      <div id="medicine_table_container_2" class="medicine-table-container" style="position:relative; left:0">
        <div style="white-space:nowrap; font-size:0px">
          <div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
            <div>
              <div style="display:inline-block; width:70px; height:45px">
                Morning<br/>-
              </div>
              <div style="display:inline-block; width:50px; height:45px">
                Noon<br/>5mg
              </div>
            </div>
            <div>
              <div style="display:inline-block; width:70px; height:35px">
                Afternoon<br/>12mg
              </div>
              <div style="display:inline-block; width:50px; height:35px">
                Evening<br/>-
              </div>
            </div>
          </div>
        </div>
        <div style="white-space:nowrap; font-size:0px">
          <div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
            <div>
              <div style="display:inline-block; width:70px; height:45px">
                Morning<br/>-
              </div>
              <div style="display:inline-block; width:50px; height:45px">
                Noon<br/>5mg
              </div>
            </div>
            <div>
              <div style="display:inline-block; width:70px; height:35px">
                Afternoon<br/>12mg
              </div>
              <div style="display:inline-block; width:50px; height:35px">
                Evening<br/>-
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

这是关于垂直对齐。默认值设置为基线并产生此输出。只需将top上的对齐方式更改为table-cell，就不会出现此问题：

<div style="display:table">
  <div style="display:table-row">
    <div style="display:table-cell;
    vertical-align: top;">
      <div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
        Dexedrine Spansules (Dextroamphetamine, ER) <br/><span style="font-style:italic">(20mg)</span>
      </div>
      <div style="height:85px; width:170px; text-align:right; font-size:13px; margin-right:5px">
        Methamphetamine (Desoxyn, IR) <br/><span style="font-style:italic">(15mg)</span>
      </div>
    </div>
    <div style="display:table-cell;
    vertical-align: top; overflow:hidden; max-width:800px">
      <div id="medicine_table_container_2" class="medicine-table-container" style="position:relative; left:0">
        <div style="white-space:nowrap; font-size:0px">
          <div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
            <div>
              <div style="display:inline-block; width:70px; height:45px">
                Morning<br/>-
              </div>
              <div style="display:inline-block; width:50px; height:45px">
                Noon<br/>5mg
              </div>
            </div>
            <div>
              <div style="display:inline-block; width:70px; height:35px">
                Afternoon<br/>12mg
              </div>
              <div style="display:inline-block; width:50px; height:35px">
                Evening<br/>-
              </div>
            </div>
          </div>
        </div>
        <div style="white-space:nowrap; font-size:0px">
          <div style="display:inline-block; background-color:yellow; width:130px; height:85px; border:1px solid #999; font-size: 12px; white-space:normal">
            <div>
              <div style="display:inline-block; width:70px; height:45px">
                Morning<br/>-
              </div>
              <div style="display:inline-block; width:50px; height:45px">
                Noon<br/>5mg
              </div>
            </div>
            <div>
              <div style="display:inline-block; width:70px; height:35px">
                Afternoon<br/>12mg
              </div>
              <div style="display:inline-block; width:50px; height:35px">
                Evening<br/>-
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

由于您的代码有点复杂，因此这里有一个基本的代码可以重现此问题并更好地了解正在发生的事情：

.table {
  display: table;
  border: 1px solid;
  margin: 5px;
}

.table>div {
  display: table-row;
}

.table>div>span {
  display: table-cell;
  padding: 0 5px;
}

.table>div>span span {
  display: inline-block;
}

baseline
<div class="table">
  <div>
    <span>one line</span>
    <span><span>two <br> line (inline-block)</span></span>
  </div>
</div>
baseline
<div class="table">
  <div>
    <span>two<br> line</span>
    <span><span>two <br> line (inline-block)</span></span>
  </div>
</div>
baseline (with overflow:hidden)
<div class="table">
  <div>
    <span>one line</span>
    <span><span style="overflow:hidden;">two <br> line</span></span>
  </div>
</div>
baseline (with overflow:hidden)
<div class="table">
  <div>
    <span>one line</span>
    <span><span style="overflow:hidden;">another line</span></span>
  </div>
</div>
top will fix all the cases
<div class="table">
  <div>
    <span style="vertical-align:top;">one line</span>
    <span><span>two <br> line</span></span>
  </div>
</div>
<div class="table">
  <div>
    <span style="vertical-align:top;">one line</span>
    <span><span style="overflow:hidden;">two <br> line</span></span>
  </div>
</div>
<div class="table">
  <div>
    <span style="vertical-align:top;">one line</span>
    <span><span style="overflow:hidden;">another line</span></span>
  </div>
</div>
<div class="table">
  <div>
    <span style="vertical-align:top;">two<br> line</span>
    <span><span>two <br> line (inline-block)</span></span>
  </div>
</div>

您可以清楚地看到inline-block（和overflow:hidden）的使用是罪魁祸首，因为它使基准计数器的计算直观而出乎意料。

Answer 2

我看到Temani Afif已经为您的原始问题提供了solution。但如果无论如何对您有帮助，以下是带有子表的表的基本结构

样式

<style>
    .table {
        display:table; border:1px solid #ccc; border-collapse:collapse
    }
    .table .row {
        display:table-row; border:1px solid #ccc; border-collapse:collapse
    }
    .table .row .headercell {
        display:table-cell; border:1px solid #ccc; height: 80px; width: 150px; border-collapse:collapse
    }
    .table .row .cell {
        display:table-cell; border:1px solid #ccc; height: 80px; Width: 300px; border-collapse:collapse
    }
</style>

表结构

<div class="table">
    <div class="row">
        <div class="headercell">
            Row1
        </div>
        <div class="cell">
            <div class="table">
                <div class="row">
                    <div class="cell">
                        Cell1
                    </div>
                    <div class="cell">
                        Cell2
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        Cell3
                    </div>
                    <div class="cell">
                        Cell4
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="headercell">
            Row2
        </div>
        <div class="cell">
            <div class="table">
                <div class="row">
                    <div class="cell">
                        Cell1
                    </div>
                    <div class="cell">
                        Cell2
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        Cell3
                    </div>
                    <div class="cell">
                        Cell4
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

如何确定display：table-cell的填充

2 个答案: