HTML表格单元格内如何实现两段文本分别居于左上角和右上角

问题根因 #

• HTML存在语法错误：.cell_header对应的结束标签写成了<div>，没有正确闭合，导致页面结构解析异常
• 浮动元素触发父容器高度塌陷：给两个p标签添加浮动属性后，父元素.cell_header没有被撑开高度，下方的<h3>元素会上移，和浮动内容出现在同一行

解决方案（推荐Flex布局实现，更易维护） #

第一步：修正HTML语法错误 #

把.cell_header的结束标签改为</div>

第二步：修改CSS代码 #

替换原来的.cell_header相关样式为如下代码即可：

.cell_header {
  /* 启用flex布局自动左右对齐子元素 */
  display: flex;
  justify-content: space-between;
  /* 可选：添加少量内边距避免文字贴边 */
  padding: 2px 4px;
}
/* 可以删除原来给p标签加的float、display: inline相关样式 */

完整修改后的代码示例 #

HTML

<table class="separated">
    <tr>
        <td>
            <div class='cell_header'>
                <p class="group">s1</p>
                <p class="classroom">N228</p>
            </div>
            <h3>S: ICT</h3>
            <p>KOH</p>
        </td>
    </tr>
    <tr>
        <td>
            <p>s1 N228</p>
            <h3>L: ICT</h3>
            <p>KOH</p>
        </td>
    </tr>
</table>

CSS

*{
  padding: 0px;
  margin: 0;
}
table, td {
    border: solid black 1px;
    border-collapse: collapse;
    text-align: center;
    column-width: 200px;
    height: 100%;
}
.separated td, .separated{
    border: 0px;
    border-bottom: 1px solid black;
    height: 100%;
}
.cell_header {
    display: flex;
    justify-content: space-between;
    padding: 2px 4px;
}

如果要保留原有float实现，只需给.cell_header添加overflow: hidden;属性，利用BFC特性撑开父容器高度，即可解决高度塌陷问题。

内容的提问来源于stack exchange，提问作者Davza