table 默认左对齐，因是块级元素；单元格内容左对齐需在 td、th 上设 text-align: left，不能作用于 table 本身；整列左对齐应使用 th:nth-child(n), td:nth-child(n)。
table 元素本身靠左不需要额外设置
HTML 默认就是块级元素，天然靠父容器左侧排列。如果你看到它“居中”或“右偏”，大概率是父容器干扰导致的——比如父 设了
text-align: center，或者用了
display: flex 且
justify-content: center。
解决方法很简单：
- 检查并移除父容器的
text-align: center 或 justify-content: center
- 确保
没有被 margin: auto 或 margin-left: auto 推向右侧
- 如需强制左对齐，给
加 margin-right: auto（默认 margin 是 0，已足够靠左）
- 避免用废弃的
align="left" 属性，它不控制表格位置，只影响浮动行为，且在现代 HTML 中不可靠
单元格内容靠左必须写在 td 和 th 上
text-align: left 写在 上完全无效，因为 不渲染文本内容，该属性只对包含文字的元素（如 td、th、p）起作用。正确做法是显式声明：
td, th {
text-align: left;
}
常见踩坑点：
- 只写
td { text-align: left; }，漏掉 th，导致表头仍居中
- 依赖浏览器默认（
td 默认左对齐、th 默认居中），但一旦父容器有 text-align: center，会继承干扰
- 用
text-align：可行但兼容性差，旧版 Android WebView 支持不稳定，建议仅作辅助，主逻辑仍用 CSS 选择器
让某几列单独左对齐用 :nth-child()
如果只要第一列（如姓名）、第二列（如地址）左对齐，其余列保持居中或右对齐，最稳的方式是按列序号匹配，而不是靠类名或结构猜测。
必须同时选中 th 和 td，否则表头和数据错位：
DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur
下载
th:nth-child(1), td:nth-child(1) {
text-align: left;
}
th:nth-child(2), td:nth-child(2) {
text-align: left;
}
别这么写：
-
tr td:first-child → 只影响第一行首列，不是整列
-
th:nth-of-type(1) → 在 和 混排时容易错位
-
.name-col { text-align: left; } → 依赖类名，结构微调就失效
移动端和嵌套容器里容易忽略的干扰源
响应式布局下，表格常被包在 max-width 容器或 overflow-x: auto 的 div 里，这时两个隐藏问题会冒出来：
- 父容器设了
text-align: center，整个表格“看起来居中”，其实是文字继承导致的视觉假象
- 表格列宽被压缩后，
text-align: left 的文字紧贴左框线，而 text-align: center 的表头留白多，左右不对称
-
white-space: nowrap 导致列宽被撑开，左对齐反而显得偏右（因内容太长，视觉重心右移）
缓解办法很务实：
- 给
th 加一点左右 padding（如 0.75em），比纯居中更耐压缩
- 用
white-space: normal 替代 nowrap，允许换行，避免单字裂列
- 始终检查
vertical-align：默认 middle 在小字号或带图标时会让内容“浮高”，需要 td { vertical-align: top; } 来压住
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
