在表头中使用flex的正确方法是什么?

Question

在下面的表中，我要求在标签中看到它们在另一端的内容

table {
width: 100%;
border-collapse: collapse;
}
th,
td {
text-align: left;
padding: 10px;
border: 1px solid #ddd;
}

<table>
<thead>
<tr>
<th><span>Col 1</span>^</th>
<th><span>Col 2</span>^</th>
<th><span>Col 3</span>^</th>
<th><span>Col 4</span>^</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
</tr>
</tbody>
</table>

当尝试使用flex我得到意外的行为

table {
width: 100%;
border-collapse: collapse;
}
th,
td {
text-align: left;
padding: 10px;
border: 1px solid #ddd;
}
/* here is the change */
th {
display: flex;
justify-content: space-between;
}

<table>
<thead>
<tr>
<th><span>Column 1</span>^</th>
<th><span>Column 2</span>^</th>
<th><span>Column 3</span>^</th>
<th><span>Column 4</span>^</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
</tr>
</tbody>
</table>

得到预期的结果，但是头丢失了它们的位置

在表头中使用flex的正确方法是什么?

Answer 1

givedisplay:flextothe因为默认情况下所有不建议更改display: table-cell;

你是这个意思吗?

table {
width: 100%;
border-collapse: collapse;
}
th,
td {
text-align: left;
padding: 10px;
border: 1px solid #ddd;
}
.d-flex{display:flex;}
.ml-auto{margin-left:auto;}

<table>
<thead>
<tr>
<th>
<div class="d-flex">Column 1
<div class="ml-auto">^</div>
</div>
</th>
<th>
<div class="d-flex">Column 1
<div class="ml-auto">^</div>
</div>
</th>
<th>
<div class="d-flex">Column 1
<div class="ml-auto">^</div>
</div>
</th>
<th>
<div class="d-flex">Column 1
<div class="ml-auto">^</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
</tr>
</tbody>
</table>