Question

我有一个Web应用程序，我正在使用CSS显示：table。我有一个包装器，它包含两个名为sbr和bdy的列。我没有问题让它看起来像一张桌子，但似乎一个表格单元格的内容影响另一个。我为此做了一个小提琴。请注意，CCC不会出现在右侧单元格的顶部。 CCC的位置取决于左侧单元格中的代码。

Fiddle example

任何人都可以解释为什么会这样。我原以为每个细胞都会与其他细胞隔离开来。

<div id="wrp">
   <div id="row">
      <div id="sbr">
         <div class="sbr_bdy">
            <h4>AAAA</h4>
         </div>
       </div>
       <div id="bdy">CCC</div>
    </div>
</div>

#wrp {
    background-color: #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    display: table;
    padding: 5px;
    width: 200px;
    margin: 0 auto;
    position: relative;
    text-align: left;
    top: 110px;
    z-index: 3;
}

.sbr_bdy {
    padding: 20px 10px;
    border: 1px solid #CDCDCD;
    border-radius: 5px 5px 5px 5px;
    background-color: red;
}

#row { display: table-row; }
#sbr,
#bdy { display: table-cell; border: 1px solid black;}

Answer 1

#bdy {
    vertical-align: top;
}

这会将CCC移动到单元格的顶部。现在你可以使用填充来获得一点间距:) 目前的行为是btw表的行为方式

对CSS显示感到困惑：表格和单元格内容的排列方式

1 个答案: