Card.Body 中的表在 react-bootstrap 中溢出

Question

我正在尝试使用反应引导程序为卡内的行详细信息部分创建具有空间的响应表。

我用不同的颜色为不同的部分着色，以便更容易看到发生了什么。 由于某种原因，卡体稍微溢出了卡。 如果我删除Card.Body高度，它也会变得更糟，因为它也开始滚动页面。

编辑：这里是沙箱： https://codesandbox.io/s/kind-allen-qn90pz?file=/src/App.tsx

这是我的代码的简化版本：

import { Card, Col, Container, Row, Table } from "react-bootstrap";

function App() {
  return (
    <Card className="h-50 d-flex flex-column">
      <Card.Header>Test</Card.Header>
      <Card.Body className="h-100">
        <Container fluid className="h-100 bg-danger">
          <Row className="flex-column h-75 bg-info">
            <Col className="p-0" style={{ overflow: "auto" }}>
              <Table
                style={{
                  tableLayout: "fixed",
                }}
                striped
                hover
                size="md"
              >
                <thead
                  className="bg-white"
                  style={{ position: "sticky", top: 0 }}
                >
                  <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                  </tr>
                </thead>
                <tbody>
                  {[...Array(100)].map((x, i) => (
                    <tr key={i}>
                      <td>val</td>
                      <td>val</td>
                      <td>val</td>
                    </tr>
                  ))}
                </tbody>
              </Table>
            </Col>
          </Row>
          <Row
            style={{ backgroundColor: "rgba(0,255,0,0.35)" }}
            className="mt-2 h-25"
          >
            <Col> This will contain the row details...</Col>
          </Row>
        </Container>
      </Card.Body>
    </Card>
  );
}

export default App;

这通过index.html中的反应安装，如下所示：

<!DOCTYPE html>
<html class="d-flex h-100 w-100" lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body class="bg-light d-flex h-100 w-100">
    <div id="root" class="h-100 d-flex flex-column w-100"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

这是它产生的结果：

任何想法如何解决这一问题？

Answer 1

标签<tr>的边框有问题。 你可以试试它们

Answer 2

将 CardBody 的 height/maxHeight 设置为 80% 左右即可。
为避免在调整大小时 ui 损坏，请使用文字像素值设置最小宽度/高度。

<Card className="h-50 d-flex flex-column" style={{minHeight: "200px", minWidth: "200px"}}>
      <Card.Header>Test</Card.Header>
      <Card.Body className="h-80" style={{maxHeight: "80%"}}>
        <Container fluid className="h-100 bg-danger" style={{minHeight: "100px", minWidth: "100px"}}>
          /*...*/

Answer 3

@irous 发布的解决方案很接近，但由于卡体的最大高度为 80%，因此对我来说从来没有完全正确。

经过几天的反复试验，我终于找到了这个 StackOverflow 答案。 根据其中的解释以及@irous 的回答，我想我只需要在Card.Body上添加一个style={{minHeight: 0}} 。

这就是 OP 修改后的代码的样子：

import { Card, Col, Container, Row, Table } from "react-bootstrap";

function App() {
  return (
    <Card className="h-50 d-flex flex-column">
      <Card.Header>Test</Card.Header>
      <Card.Body style={{minHeight: 0}} className="h-100">
        <Container fluid className="h-100 bg-danger">
          <Row className="flex-column h-75 bg-info">
            <Col className="p-0" style={{ overflow: "auto" }}>
              <Table
                style={{
                  tableLayout: "fixed",
                }}
                striped
                hover
                size="md"
              >
                <thead
                  className="bg-white"
                  style={{ position: "sticky", top: 0 }}
                >
                  <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                  </tr>
                </thead>
                <tbody>
                  {[...Array(100)].map((x, i) => (
                    <tr key={i}>
                      <td>val</td>
                      <td>val</td>
                      <td>val</td>
                    </tr>
                  ))}
                </tbody>
              </Table>
            </Col>
          </Row>
          <Row
            style={{ backgroundColor: "rgba(0,255,0,0.35)" }}
            className="mt-2 h-25"
          >
            <Col> This will contain the row details...</Col>
          </Row>
        </Container>
      </Card.Body>
    </Card>
  );
}

export default App;

Card.Body 中的表在 react-bootstrap 中溢出

问题描述

3 个解决方案

解决方案1
0 2022-09-10 15:44:13

解决方案2
0 2022-09-10 17:31:06

解决方案3
0 2022-09-12 19:12:51

Card.Body 中的表在 react-bootstrap 中溢出

问题描述

3 个解决方案

解决方案1 0 2022-09-10 15:44:13

解决方案2 0 2022-09-10 17:31:06

解决方案3 0 2022-09-12 19:12:51

解决方案1
0 2022-09-10 15:44:13

解决方案2
0 2022-09-10 17:31:06

解决方案3
0 2022-09-12 19:12:51