Tengo una matriz vacía que traduzco al estado en React. Cuando la matriz no está llena, me gustaría agregar un texto que diga "todavía no hay eventos de coincidencia..." en el tbody de una tabla de react-bootstrap .

La imagen es como se ve atm- No estoy seguro de cómo centrar el texto en el medio de la Card .

 const [matchEvents, setMatchEvents] = useState([]); return ( <Card> <Table size="sm"> <thead> <tr> <th style={{ width: "33.33%" }}>Event</th> <th style={{ width: "33.33%" }}>Time</th> <th style={{ width: "33.33%" }}>Period</th> </tr> </thead> {matchEvents.length !== 0 ? ( <tbody> { //Irrelevant code for mapping object to table in here } </tbody> ) : ( <tbody> <tr> <td /> <td style={{ display: "flex", position: "absolute", }} > No Match Events Yet... </td> <td /> </tr> </tbody> )} </Table> </Card> );

Intenté agregar <tr> y <td> como relleno para la parte superior para colocar el texto en el centro de la tarjeta, pero obtuve algunas líneas como bordes y no pude sobrescribirlas en línea con !important por alguna razón.