I am trying to align my bootstrap table but I cant. I want it like as bootstrap class 'd-flex justify-content-between'. if i have 3 items in my table ,I want 1st one in the left 2nd one middle and last one in the right side. but here it takes places by its own way.
code:
<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>
It sounds like you want to align the text in the <td> tags instead of the entire table.
You can add text-left, text-center, and text-right classes to your <td> tags, respectively or I would try this in your 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>