如何在 Vue.js 中使用 CSS 对齐表头和内容？答案

【问题标题】：How do you align table headers and content using CSS in Vue.js?如何在 Vue.js 中使用 CSS 对齐表头和内容？
【发布时间】：2021-10-05 23:38:05
【问题描述】：

我之前问过这个问题，但措辞完全错误，所以我会再试一次。

我在 Vue.js 上构建的登录页面存在 CSS 问题。

Image

我正在尝试将表格标题与表格内容对齐。任何人都知道做到这一点的最佳方法 - 我已经尝试了 2 个小时，但没有任何结果。

编辑：我没有将人员添加到项目的管理员权限，但如果您想看一下，我很乐意通过电子邮件发送文件...

【问题讨论】：

有很多方法可以做到这一点，但是如果没有对您的代码的可见性，就很难提出解决方案...... guyaristide@gmail.com 是我的电子邮件地址
@AristideGuyEmmanuelKouakou 谢谢 - 刚刚通过电子邮件向您发送了附加代码。
你尝试设置边框间距吗？
是的，它什么也没做
请在您的问题中附上相关代码。

标签： css vue.js vuejs2 flexbox

【解决方案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组件