如何对齐引导表?

Question

我试图对齐我的引导表，但我不能。我想要它像引导类'd-flex justify-content-between'。如果我的表中有3项，我希望第一个在左边，第二个在中间，最后一个在右边。但在这里，它以自己的方式发生。

代码:

<table class="table table-striped text-center">
<thead>
<tr>
<th scope="col">product Name</th>
<th scope="col">Quantity</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
{products.map((product) => (
<tr key={product.id}>
<td>{product.name}</td>
<td>{product.price}</td>
<td>
<button className="btn btn-danger">Delete</button>
</td>
</tr>
))}
</tbody>
</table>

Answer 1

听起来您想对齐<td>标记中的文本，而不是整个表。您可以将text-left,text-center和text-right类分别添加到<td>标签中，或者我会在您的CSS中尝试此操作:

tr td:nth-child(1) {text-align: left;}
tr td:nth-child(2) {text-align: center;}
tr td:nth-child(3) {text-align: right;}

<table class="table table-striped text-center" border="1" style="width:100%;">
<thead>
<tr>
<th scope="col">product Name</th>
<th scope="col">Quantity</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>{product.name}</td>
<td>{product.price}</td>
<td>
<button className="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>