如何在 Vue.js 中使用 CSS 对齐表头和内容？
Posted
技术标签:
【中文标题】如何在 Vue.js 中使用 CSS 对齐表头和内容？【英文标题】：How do you align table headers and content using CSS in Vue.js? 【发布时间】：2021-10-05 23:38:05 【问题描述】：我之前问过这个问题，但措辞完全错误，所以我会再试一次。
我在 Vue.js 上构建的登录页面存在 CSS 问题。
Image
我正在尝试将表格标题与表格内容对齐。任何人都知道做到这一点的最佳方法 - 我已经尝试了 2 个小时，但没有任何结果。
编辑：我没有将人员添加到项目的管理员权限，但如果您想看一下，我很乐意通过电子邮件发送文件...
【问题讨论】：
有很多方法可以做到这一点，但是如果没有对您的代码的可见性，就很难提出解决方案...... guyaristide@gmail.com 是我的电子邮件地址 @AristideGuyEmmanuelKouakou 谢谢 - 刚刚通过电子邮件向您发送了附加代码。 你尝试设置边框间距吗？ 是的，它什么也没做 请在您的问题中附上相关代码。 【参考方案1】：你用过 text-align 吗？
简单的解决方案如果你想在表格列中使用 text-left、text-right 或 text-center 然后添加内联 css 否则添加外部 css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table
width: 100%;
border: 1px solid #000000;
.text-left
text-align: left;
.text-center
text-align: center;
.text-right
text-align: right;
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="text-left">Text Left Head</th>
<th class="text-center">Text center Head</th>
<th class="text-right">Text Right Head</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Text Left Body</td>
<td class="text-center">Text center Body</td>
<td class="text-right">Text Right Body</td>
</tr>
</tbody>
</table>
</body>
</html>
【讨论】：
表格有自己的组件。于是就有了Table Header，Table Row组件以上是关于如何在 Vue.js 中使用 CSS 对齐表头和内容？的主要内容，如果未能解决你的问题，请参考以下文章