如何在HTML表格的td元素底部放置div？

下面提供几种实用方案，适配不同场景需求：

方案一：Flex布局（推荐） #

通过给td设置flex布局，让底部div自动填充剩余空间，从而固定在单元格底部。

修改后的代码示例：

<table style="width:100px;">
    <thead class="text-center">
        <th>Name</th>
        <th>Marks</th>
    </thead>
    <tbody>
    <tr>
        <td>Nikhil</td>
        <td style="display: flex; flex-direction: column; min-height: 60px;">
            60
            <div style="margin-top: auto;">Average</div>
        </td>
    </tr>
    <tr>
        <td>Akhil</td>
        <td style="display: flex; flex-direction: column; min-height: 60px;">
            90
            <div style="margin-top: auto;">Excellent</div>
        </td>
    </tr>
    <tr>
        <td>Alan</td>
        <td style="display: flex; flex-direction: column; min-height: 60px;">
            40
            <div style="margin-top: auto;">Poor</div>
        </td>
    </tr>
    </tbody>
</table>

• 说明：min-height可根据需求调整，确保所有单元格高度统一；margin-top: auto会让div自动顶到单元格底部。

方案二：Position定位 #

通过相对定位+绝对定位的组合，将div固定在td底部。

代码示例：

<table style="width:100px;">
    <thead class="text-center">
        <th>Name</th>
        <th>Marks</th>
    </thead>
    <tbody>
    <tr>
        <td>Nikhil</td>
        <td style="position: relative; min-height: 60px; padding-bottom: 20px;">
            60
            <div style="position: absolute; bottom: 0; left: 0; width: 100%;">Average</div>
        </td>
    </tr>
    <tr>
        <td>Akhil</td>
        <td style="position: relative; min-height: 60px; padding-bottom: 20px;">
            90
            <div style="position: absolute; bottom: 0; left: 0; width: 100%;">Excellent</div>
        </td>
    </tr>
    <tr>
        <td>Alan</td>
        <td style="position: relative; min-height: 60px; padding-bottom: 20px;">
            40
            <div style="position: absolute; bottom: 0; left: 0; width: 100%;">Poor</div>
        </td>
    </tr>
    </tbody>
</table>

• 说明：padding-bottom的值需大于等于底部div的高度，避免单元格内其他内容被遮挡；min-height用于统一单元格高度。

方案三：表格单元格垂直对齐 #

如果只需让td内所有内容整体靠底部，直接使用表格原生的垂直对齐属性即可：

<table style="width:100px;">
    <thead class="text-center">
        <th>Name</th>
        <th>Marks</th>
    </thead>
    <tbody>
    <tr>
        <td>Nikhil</td>
        <td style="vertical-align: bottom;">60<br>Average</td>
    </tr>
    <tr>
        <td>Akhil</td>
        <td style="vertical-align: bottom;">90<br>Excellent</td>
    </tr>
    <tr>
        <td>Alan</td>
        <td style="vertical-align: bottom;">40<br>Poor</td>
    </tr>
    </tbody>
</table>

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