表高度在反应引导程序中不起作用答案

【问题标题】：table height not working in react bootstrap表高度在反应引导程序中不起作用
【发布时间】：2022-11-17 20:46:29
【问题描述】：

我正在使用 react-bootstrap 组件。我有一个 table，它被 div 覆盖。在表中，它有 6 个数据。我已将 height 添加到我的 div 中。但是根据height，table 并没有最小化。我需要表格适合 div 并且表格内容应该滚动。

用户界面如下所示

它在 div 中溢出。我尝试应用高度和滚动。但它不工作。

这是我试过的代码：

import Table from "react-bootstrap/Table";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div style={{ height: "200px", backgroundColor: "aqua" }}>
      <Table striped bordered>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody style={{ overflow:"scroll" }}>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>5</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>6</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

我不知道该怎么做。请帮我解决一些问题。

【问题讨论】：

标签： javascript html reactjs bootstrap-4 react-bootstrap

【解决方案1】：

根据您提供的当前 CSS，应该通过将 overflow-y: scroll 放置到您的容器 div 来修复它。

【讨论】：

【解决方案2】：

在文档中，https://react-bootstrap.github.io/components/table/#always-responsive

在每个断点上，对水平滚动的表格使用响应式。

您是否尝试添加它？


import Table from "react-bootstrap/Table";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div style={{ height: "200px", backgroundColor: "aqua" }}>
      <Table responsive striped bordered>                    <--------
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        .....
      </Table>
   </div>
)}

【讨论】：