vue table表头居中

在 Vue 中，如果你想让表格的表头内容居中显示，可以借助 CSS 样式来实现。如果使用的是 `element-ui` 或者 `ant-design-vue` 等 UI 框架提供的 `<el-table>` 或类似组件，则可以通过设置属性或样式完成。 ### 使用 Element Plus (基于Vue 3) 假设我们正在使用 **Element Plus** 的 `<el-table-column>` 组件： ```vue <template> <el-table :data="tableData" style="width: 100%"> <!-- 设置 header-align 属性 --> <el-table-column prop="date" label="日期" width="180" header-align="center"></el-table-column> <el-table-column prop="name" label="姓名" width="180" header-align="center"></el-table-column> <el-table-column prop="address" label="地址" header-align="center"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, // 其他数据... ] } } } </script> ``` #### 解释： - `header-align="center"`：将该列的表头文字水平居中对齐。 --- ### 如果你需要全局控制所有表头居中 可以在项目的通用样式文件（如 `global.css` 或 `main.js` 初始化引入）添加统一的样式规则： ```css /* 表格头部单元格 */ .el-table th.is-leaf, .el-table .cell { text-align: center; } ``` 这种方式会自动应用到所有的 `<el-table>` 和 `<el-table-column>` 上。 --- ### 对于原生 HTML Table 实现表头居中 如果你不是使用的框架而是直接操作 DOM 渲染表格，那么可以直接通过 `style` 来指定文本居中： ```html <table border="1"> <thead> <tr> <th style="text-align:center">序号</th> <th style="text-align:center">名称</th> <th style="text-align:center">价格</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>苹果</td> <td>5元</td> </tr> </tbody> </table> ``` 或者利用外部CSS: ```css th { text-align: center; /* 让所有<th>标签内的文本居中 */ } ```