table 默认左对齐，因是块级元素；单元格内容左对齐需在 td、th 上设 text-align: left，不能作用于 table 本身；整列左对齐应使用 th:nth-child(n), td:nth-child(n)。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

table 元素本身靠左不需要额外设置

HTML <table> 默认就是块级元素，天然靠父容器左侧排列。如果你看到它“居中”或“右偏”，大概率是父容器干扰导致的——比如父 <code><div> 设了 <code>text-align: center，或者用了 display: flex 且 justify-content: center。

解决方法很简单：

• 检查并移除父容器的 text-align: center 或 justify-content: center
• 确保 <table> 没有被 <code>margin: auto 或 margin-left: auto 推向右侧
• 如需强制左对齐，给 <table> 加 <code>margin-right: auto（默认 margin 是 0，已足够靠左）
• 避免用废弃的 align="left" 属性，它不控制表格位置，只影响浮动行为，且在现代 HTML 中不可靠

单元格内容靠左必须写在 td 和 th 上

text-align: left 写在 <table> 上完全无效，因为 <code><table> 不渲染文本内容，该属性只对包含文字的元素（如 <code>td、th、p）起作用。

正确做法是显式声明：

立即学习“前端免费学习笔记（深入）”；

td, th {
  text-align: left;
}

常见踩坑点：

• 只写 td { text-align: left; }，漏掉 th，导致表头仍居中
• 依赖浏览器默认（td 默认左对齐、th 默认居中），但一旦父容器有 text-align: center，会继承干扰
• 用 <col> 标签设 text-align：可行但兼容性差，旧版 Android WebView 支持不稳定，建议仅作辅助，主逻辑仍用 CSS 选择器

让某几列单独左对齐用 :nth-child()

如果只要第一列（如姓名）、第二列（如地址）左对齐，其余列保持居中或右对齐，最稳的方式是按列序号匹配，而不是靠类名或结构猜测。

必须同时选中 th 和 td，否则表头和数据错位：

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) → 在 <thead> 和 <code><tbody> 混排时容易错位 <li> <code>.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; } 来压住