Estoy tratando de alinear mi tabla de arranque pero no puedo. Lo quiero como clase de arranque 'd-flex justificar-contenido-entre'. si tengo 3 artículos en mi mesa, quiero el primero a la izquierda, el segundo en el medio y el último en el lado derecho. pero aquí tiene lugar a su manera.
código:
<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>Parece que desea alinear el texto en las etiquetas <td> en lugar de en toda la tabla. Puede agregar las clases text-left , text-center y text-right a sus etiquetas <td> , respectivamente, o probaría esto en su 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>