反应内联样式 - 用居中文本替换 tbody

Question

我有一个空数组，我将其转换为 React 中的状态。当未填充数组时，我想在react-bootstrap 表的tbody 中添加一条“还没有匹配事件...”的文本。

图像是它的外观 - 我不确定如何将文本居中在 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>
  );

我尝试添加 <tr> 和 <td> 作为顶部的填充符，以使文本进入卡片的中心，但我得到了几行作为边框，无法用 !important 覆盖它们出于某种原因。

Answer 1

试试这段代码，复制粘贴即可。

您可以在这里预览演示：Demo

const [matchEvents, setMatchEvents] = useState([]);

  <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 && (
        <tbody>
          {/* Your Table Body */}
        </tbody>
      )}
    </Table>

    {/* Your Error Message */}
    {!matchEvents.length && (
      <div
        style={{
          height: "100vh",
          display: "flex",
          alignItems: "center"
        }}
      >
        <p style={{ width: "100%", textAlign: "center" }}>
          No Match Events Yet...
        </p>
      </div>
    )}
  </Card>