为标题单元格使用粘滞位置，并确保使用z索引和背景，它们将在主体单元格上方可见
React：

...
<Table height="200" bordered className="fixed-header">
...

CSS：

.fixed-header thead th { /* the thead selector is required because there are th elements in the body */
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: white;
}

注意：该解决方案可能会导致标题边框出现问题-滚动时看不到它们。此问题中建议了该问题的可能解决方案：Table headers position:sticky and border issue

您可以在example.js中添加此样式。

const style = {
  table: {
    width: '100%',
    display: 'table',
    borderSpacing: 0,
    borderCollapse: 'separate',
  },
  th: {
    top: 0,
    left: 0,
    zIndex: 2,
    position: 'sticky',
    backgroundColor: '#fff',
  },
};

然后使用Table & th元素标记上的样式

<Table bordered height="200" style={style.table}>
   <thead>
      <tr>
        <th style={style.th}>#</th>
        <th style={style.th}>First Name</th>
        <th style={style.th}>Last Name</th>
        <th style={style.th}>Username</th>
      </tr>
 </thead>

下面是工作example code on Stackblitz
检查result
使用MUI V4固定标题进行图案化

一个简单的选择是只使用2表的头部和身体分开：

<Table>
      <thead>
        <tr>
          <th>ID</th>
        </tr>
      </thead>
    </Table>
    <div style={{ maxHeight: '10rem' }}>
      <Table>
        <tbody>
          <tr>
            <th>1</th>
          </tr>
          <tr>
            <th>2</th>
          </tr>
        </thead>
      </Table>
    </div>