Vue.js-如何对齐表头标题和行

Question

图像

我正在尝试将表格标题和表格内容对齐。任何人都知道最好的方法——我已经试了两个小时，却一无所获。

编辑：如果有人想看一看，代码就在这里。。。

这是列标题的CSS

.column-header {
font-size: 20px;
font-weight: 600;
color: #fff;
font-family: Poppins, sans-serif;
text-decoration: none;
width: 400px;
padding: 10px 10px 10px 10px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
margin: 5px;
transition: all 0.4s ease-in;
}

这是表行的CSS

font-weight: 700;
font-size: 20px;
height: 60px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
margin-top: 10px;
border-radius: 10px;
width: 100%;
min-height: 60px;
}

Answer 1

您可以将text-align: center;添加到列标题类中。

Answer 2

从Html中选择td和th标记，并将text-align: center;添加到CSS中，这将使整个标头及其内容成为中心。