I have an empty array which I translate into state in React. When the array isn't populated, I would like to add a text saying "no match events yet..." into a react-bootstrap Table's tbody.

Image is how it looks atm- I'm not sure how to center the text in the middle of the 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>
  );

I tried adding <tr> and <td> as filler for the top to get the text into the center of the card, but I got a few lines as borders and wasn't able to overwrite them inline with !important for some reason.