[英]Table inside Card.Body overflows in react-bootstrap
我正在嘗試使用反應引導程序為卡內的行詳細信息部分創建具有空間的響應表。
我用不同的顏色為不同的部分着色,以便更容易看到發生了什么。 由於某種原因,卡體稍微溢出了卡。 如果我刪除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>
任何想法如何解決這一問題?
標簽<tr>
的邊框有問題。 你可以試試它們
將 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"}}>
/*...*/
@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;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.