使表格单元格中的文本相互独立答案

【问题标题】：Make text in table cells independent of each other使表格单元格中的文本相互独立
【发布时间】：2013-08-12 22:53:44
【问题描述】：

我有一组嵌套的 div 显示为如下表格：

<div class="table">
    <div class="table-row">
        <div class="table-cell"><div class="just-a-box"><!--&nbsp;--></div></div>
        <div class="table-cell">Just some text</div>
    </div>
</div>

表格显示是使用 CSS 实现的。第一个单元格中的“just-a-box” div 的样式如下：

.just-a-box {
    background-color: blue;
    height: 50px;
    width: 50px;
}

我的问题是这个框会影响第二列中文本的定位，除非我在框内添加一个“ ”，如 HTML 注释所示。文本不再在单元格顶部对齐。

我不明白为什么会这样。我正在寻找一种解决方案，使第二个单元格的内容完全独立于第一个单元格，因为我不想对第一个单元格的内容做出任何假设。这可能吗？

任何提示表示赞赏！如果有人也能解释为什么细胞不是相互独立的，那就太棒了。这正是我所期望的。

有关问题的说明，请参阅 http://jsfiddle.net/fMWQH/1/。

【问题讨论】：

您可以尝试添加 .table-cell {display: table-cell;垂直对齐：顶部； } ???

标签： html css alignment css-tables

【解决方案1】：

给“表格单元”类一个垂直对齐：属性 - 中间/顶部/底部。

.table-cell
{
    display: table-cell;
    vertical-align: top;
}

原因

真正的<td> 元素本身有一个vertical-align 属性。

看看它是否正常工作：http://jsfiddle.net/fMWQH/6/

【讨论】：

【解决方案2】：

表格单元格的默认垂直对齐方式为baseline。

您的示例中的空框没有内容，因此该框的基线是它的底边。另一个表格单元格中的文本然后将自身与该基线对齐。当您在蓝色框中添加一些文本时，基线会发生变化，使其看起来好像内容现在是顶部对齐的。

正如其他答案中已经提到的，您可以将所有单元格的垂直对齐方式更改为 top 或确保您没有空单元格并保留 baseline 设置。

【讨论】：

【解决方案3】：

尝试将 vertical-align: top; 添加到您的 .table-cell 类

CSS

<style type='text/css'>
.table {
display: table;
}

.table-row {
display: table-row;
}

.table-cell {
display: table-cell;
vertical-align: top;
}

.just-a-box {
background-color: blue;
height: 50px;
width: 50px;
}
</style>

HTML

<div class="table">
<div class="table-row">
<div class="table-cell"><div class="just-a-box"></div></div>
<div class="table-cell">Just some text</div>
</div>
</div>

<hr/>

<div class="table">
<div class="table-row">
<div class="table-cell"><div class="just-a-box"></div></div>
<div class="table-cell">Just some text</div>
</div>

jsfiddle example

【讨论】：