如何在HTML表格中实现单元格内容置底-html教程-PHP中文网

vertical-align: bottom 只能作用于 td 或 th 元素，直接写在单元格标签上最稳妥；它对 table、tr 无效，也不适用于块级元素或 flex 容器，多行内容贴底需改用 flex 布局。

如何在html表格中实现单元格内容置底

vertical-align: bottom 只能加在 `td` 或 `th` 上

直接写 <td style="vertical-align: bottom;">内容</td> 是最稳妥的做法。这个属性不作用于 <table> 或 <code><tr>，哪怕你给整行加了 class：<code>.bottom-row { vertical-align: bottom; }，也无效——tr 本身不渲染内容，它只是容器，真正承载文本的是 td 和 th。

常见错误是把 vertical-align 放在 <table> 标签上，比如 <code><table style="vertical-align: bottom;">，这完全没用，浏览器会忽略。 <ul> <li> <code>vertical-align 的合法取值只有：top、middle、bottom、baseline（不能写 left/right）

th 默认是 middle，td 也是 middle，不是 top

如果单元格里有换行或块级元素（如 <div>），<code>vertical-align 仍只对第一行行内内容起作用；要控制整个块的垂直位置，得用 flex 布局

为什么加了 `vertical-align: bottom` 还是没到底

大概率是父级设置了 line-height 或 padding，撑高了单元格高度，而内容被“卡”在中间位置。检查 computed styles 里的 height、line-height、padding 是否异常大。

另一个常见干扰项是 UI 框架重置样式。比如 Bootstrap 会给 td 加 padding: .75rem，Ant Design 默认 td 的 vertical-align 是 middle，且未设 !important，但若你写的 CSS 选择器优先级不够（比如只用了标签名），就会被覆盖。

用浏览器开发者工具看 “Computed” 面板，确认生效的 vertical-align 值是不是 bottom
避免用 !important，优先提高选择器特异性，例如写成 table.data td.bottom { vertical-align: bottom; }
如果单元格里嵌套了 <div style="display: flex;">，<code>vertical-align 失效——它只对行内上下文有效
多行内容想整体贴底，vertical-align 不够用

当 td 里有两行文字、图标+文字、或带 <br> 的内容时，vertical-align: bottom 只会让第一行基线贴底，其余行还是按默认行高堆叠。这时候必须切换思路：用 flex 布局接管单元格内部排版。

Doc To HTML
使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

做法很简单：给 td 加 style="display: flex; flex-direction: column; justify-content: flex-end;"。这样整个内容块会从底部向上堆，不管几行都贴底。
- 注意：flex 会让子元素变成 flex item，原有 vertical-align 失效，别混用
- 如果单元格还含图片或 inline 元素，建议统一包裹一层 <div> 再 flex，避免意外换行 <li>邮件模板慎用 flex——Outlook 对 <code>display: flex 支持极差，老式客户端可能直接崩掉布局