React 内联样式 - 将 tbody 替换为居中文本

Question

我有一个空数组，我将其转换为 React 中的状态。当数组未填充时，我想在 react-bootstrap Table 的 tbody.

中添加一个文本“还没有匹配事件...”

图片是它在 atm 上的样子 - 我不确定如何将文本居中放置在 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>

React 内联样式 - 将 tbody 替换为居中文本

React Inline Style- Replace tbody With Centered Text

javascript

css

inline-styles

reactjs

react-bootstrap