如何使表格固定在页面中央，新增行后可滚动查看完整内容？

问题情况 #

刚接触前端，正在开发React表格，每次新增一行时整个表格会向上移动，顶部内容看不到。想要表格固定在页面中间，能通过滚动页面或表格自身查看剩余内容，而不是整个表格移位。

现有代码 #

JSX部分 #

<div className="container">
  <div className="myTable">
    <table>
      <tr>
        <th>Decision</th>
        <th>Federation Approval</th>
        <th>Offer From</th>
        <th>Transfer Type</th>
        <th>Offer For</th>
        <th>Player Current Club</th>
        <th>Fee Offered in Millions</th>
        <th>Action</th>
      </tr>
      {data.map((offer, key) => {
        return (
          <tr key={key}>
            <td>{offer.decision}</td>
            <td>{offer.fedApproval}</td>
            <td>{offer.buyingClub}</td>
            <td>{offer.transferType}</td>
            <td>{offer.player}</td>
            <td>{offer.sellingClub}</td>
            <td>{offer.fee}</td>

            <button className="approve" disabled={offer.fedApproval != "AWAITING       APPROVAL"} onClick={(e) => { handleApprove(e, offer.fedApproval, offer.buyingClub, offer.player) }}> Approve Offer</button>
            <button className="disapprove" disabled={offer.fedApproval != "AWAITING APPROVAL"} onClick={(e) => { handleDisapprove(e, offer.fedApproval, offer.buyingClub, offer.player) }}> Disapprove Offer </button>
            <Link to="/clubffpstatus" style={{ textDecoration: "none" }}>
              <button className="checkStatus"> Check Club FFP Status</button>
            </Link>
          </tr>
        )
      })}
    </table>
  </div>
</div>

SCSS部分 #

.container {
  align-items: center;
  justify-items: center;
  .myTable {
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    //overflow-y: scroll;
    margin: 0 auto;
    margin-top: 0 auto;

    button {
      display: flex;
      flex-direction: row;
      margin: 5px;
      cursor: pointer;
    }

    .approve {
      color: green;
      background-color: white;
      border-color: green;
      border-radius: 8px;
    }

    .approve:hover{
      transform:scale(1.1);
    }

    .approve:disabled{
      color: lightgray;
      border-color: lightgray;
      transform: none;
      cursor: default;
    }

    .disapprove {
      color: red;
      background-color: white;
      border-color: red;
      border-radius: 8px;
    }

    .disapprove:hover{
      transform:scale(1.1);
    }

    .disapprove:disabled{
      color: lightgray;
      border-color: lightgray;
      transform: none;
      cursor: default;
    }

    table {
      border: 2px solid blue;
      width: 800px;
      height: 200px;
      align-items: center;
      justify-items: center;
    }

    th {
      border-bottom: 1px solid black;
      gap: 0px;
    }

    td {
      text-align: center;
      border-bottom: 1px solid black;
    }
  }
}

解决步骤 #

问题核心是.myTable用了align-items: center，当表格内容变长时，整个容器会把表格垂直居中，导致表格向上移动。另外没开启滚动，内容溢出后就会看不到顶部。

1. 调整容器布局，开启内部滚动 #

修改.myTable的CSS：

• 去掉align-items: center，改成align-items: flex-start，让表格从容器顶部开始排列
• 取消注释overflow-y: scroll，让内容超出容器高度时内部滚动
• 给.container加上display: flex和justify-content: center，确保整个表格容器在页面水平居中，垂直方向用min-height:100vh和align-items:center固定在页面中间

2. 固定表头（可选但实用） #

把表格的表头和内容分开成<thead>和<tbody>，给表头添加固定样式，滚动内容时表头不会消失：

• JSX里把表头的<tr>放到<thead>，循环内容放到<tbody>
• 给table设置border-collapse: collapse，thead th设置position: sticky和top:0，加背景色避免被内容覆盖

修改后的完整SCSS #

.container {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  align-items: center;

  .myTable {
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: scroll;
    margin: 0 auto;

    button {
      display: inline-flex;
      margin: 5px;
      cursor: pointer;
    }

    .approve {
      color: green;
      background-color: white;
      border-color: green;
      border-radius: 8px;
    }

    .approve:hover {
      transform: scale(1.1);
    }

    .approve:disabled {
      color: lightgray;
      border-color: lightgray;
      transform: none;
      cursor: default;
    }

    .disapprove {
      color: red;
      background-color: white;
      border-color: red;
      border-radius: 8px;
    }

    .disapprove:hover {
      transform: scale(1.1);
    }

    .disapprove:disabled {
      color: lightgray;
      border-color: lightgray;
      transform: none;
      cursor: default;
    }

    table {
      border: 2px solid blue;
      width: 800px;
      border-collapse: collapse;
    }

    th {
      border-bottom: 1px solid black;
      background-color: white;
      position: sticky;
      top: 0;
    }

    td {
      text-align: center;
      border-bottom: 1px solid black;
    }

    tbody {
      display: block;
      max-height: calc(50vh - 40px);
      overflow-y: auto;
    }

    thead, tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
    }
  }
}

修改后的JSX #

<div className="container">
  <div className="myTable">
    <table>
      <thead>
        <tr>
          <th>Decision</th>
          <th>Federation Approval</th>
          <th>Offer From</th>
          <th>Transfer Type</th>
          <th>Offer For</th>
          <th>Player Current Club</th>
          <th>Fee Offered in Millions</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {data.map((offer, key) => {
          return (
            <tr key={key}>
              <td>{offer.decision}</td>
              <td>{offer.fedApproval}</td>
              <td>{offer.buyingClub}</td>
              <td>{offer.transferType}</td>
              <td>{offer.player}</td>
              <td>{offer.sellingClub}</td>
              <td>{offer.fee}</td>
              <td>
                <button className="approve" disabled={offer.fedApproval !== "AWAITING APPROVAL"} onClick={(e) => handleApprove(e, offer.fedApproval, offer.buyingClub, offer.player)}> Approve Offer</button>
                <button className="disapprove" disabled={offer.fedApproval !== "AWAITING APPROVAL"} onClick={(e) => handleDisapprove(e, offer.fedApproval, offer.buyingClub, offer.player)}> Disapprove Offer </button>
                <Link to="/clubffpstatus" style={{ textDecoration: "none" }}>
                  <button className="checkStatus"> Check Club FFP Status</button>
                </Link>
              </td>
            </tr>
          )
        })}
      </tbody>
    </table>
  </div>
</div>

说明 #

• 现在表格容器固定在页面中间，新增行时内容向下扩展，超出容器高度后会在内部滚动，不会导致整个表格上移
• 表头固定在顶部，滚动内容时能一直看到列标题，提升体验
• 把按钮放到<td>里，避免表格布局错乱，符合HTML规范

内容的提问来源于stack exchange，提问作者alwaysneedhelp1901