Table inside Card.Body overflows in react-bootstrap

Question

I am trying to create responsive table with space for a row details section inside a card using react bootstrap.

I have coloured the different sections in different colours so it is easier to see what is going on. For some reason the card body overflows the card by a little. If I remove the Card.Body height it becomes even worse as it starts scrolling the page as well.

EDIT: Here is the sandbox: https://codesandbox.io/s/kind-allen-qn90pz?file=/src/App.tsx

Here is a simplified version of my code:

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;

This gets mounted by react in the index.html which looks like this:

<!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>

And here is the result it produces:

Any ideas how to fix this?

score 1 · Accepted Answer · answered Sep 12 '22 at 19:12

The solution posted by @irous was close but never did work quite right for me because of the 80% max height on the card body.

After a few days of trial and error I finally found this StackOverflow answer. Based on the explanation in it as well as @irous's answer I figured I just need to add a style={{minHeight: 0}} on the Card.Body.

This is what the modified code from the OP looks like:

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;

Gibloor · Answer 2 · 2022-09-10T16:28:36.933

0

Problem with border of tag <tr>. You can try off them

edited Sep 10 '22 at 16:28

answered Sep 10 '22 at 15:44

Gibloor

143
6

Sorry, where do I add this? Can you please show an example or fiddle with the codesandbox? – Slav Sep 10 '22 at 15:57
My fault box-sizing doesn't work with table. I has deleted class m-2 from last block and added a little bit in css – Gibloor Sep 10 '22 at 16:30

irous · Answer 3 · 2022-09-10T17:49:25.823

0

Set CardBody's height/maxHeight around 80% will work.
To avoid ui broken when resizing, setting min width/height with literal pixel value.

<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"}}>
          /*...*/

edited Sep 10 '22 at 17:49

answered Sep 10 '22 at 17:31

irous

401
3
8

I tried that but it breaks when resizing. The row details row either gets on top of the table row or it gets outside the card. – Slav Sep 10 '22 at 17:33
@Slav consider setting minHeight for your card/container... – irous Sep 10 '22 at 17:36
I tried. Could not make it work. Do you have an example? – Slav Sep 10 '22 at 19:14
@Slav just like my code snippet. I updated it. – irous Sep 10 '22 at 19:17
Tried this. Did not work as expected. It breaks with minimal resizing. – Slav Sep 10 '22 at 20:17

Table inside Card.Body overflows in react-bootstrap

3 Answers3