node.js - 如何使固定的表头与行对齐？ react js、 Node js

Question

如何实现向下或向上滚动时固定的表标题。我目前的表格是可滚动的，但表格标题消失了。我希望修复表格标题。我使用rest api从jira获取数据，并且数据是随机的，因此它会自动修复每个表头/表行/表单元格的宽度，但如何使表头在向下滚动时保持固定？目前看起来像这样:

const WorkInProgressHLEsDataFilter = () => {
      const { WorkInProgressHLESearchTerm, WIPHLEsData } = this.state;

      return WIPHLEsData
        .filter(issue => {
          return issue.supNumber && issue.supNumber.toLowerCase().indexOf(WorkInProgressHLESearchTerm.toLowerCase()) !== -1 ||
          issue.Airline && issue.Airline.toLowerCase().indexOf(WorkInProgressHLESearchTerm.toLowerCase()) !== -1 ||
          issue.Product && issue.Product.toLowerCase().indexOf(WorkInProgressHLESearchTerm.toLowerCase()) !== -1 ||
          issue.Title && issue.Title.toLowerCase().indexOf(WorkInProgressHLESearchTerm.toLowerCase()) !== -1 ||
          issue.Status && issue.Status.toLowerCase().indexOf(WorkInProgressHLESearchTerm.toLowerCase()) !== -1 || 
          issue.DateHLERequestReceived && issue.DateHLERequestReceived.toLowerCase().indexOf(WorkInProgressHLESearchTerm.toLowerCase()) !== -1 || 
          issue.HLEDevDays && issue.HLEDevDays.toLowerCase().indexOf(WorkInProgressHLESearchTerm.toLowerCase()) !== -1 || 
          issue.HLEClientDays && issue.HLEClientDays.toLowerCase().indexOf(WorkInProgressHLESearchTerm.toLowerCase()) !== -1 ||
          issue.DateHLESent && issue.DateHLESent.toLowerCase().indexOf(WorkInProgressHLESearchTerm.toLowerCase()) !== -1 || 
          issue.DateHLEApprovedRefused && issue.DateHLEApprovedRefused.toLowerCase().indexOf(WorkInProgressHLESearchTerm.toLowerCase()) !== -1 || 
          issue.Comments && issue.Comments.toLowerCase().indexOf(WorkInProgressHLESearchTerm.toLowerCase()) !== -1
        })
        .map(issue => (

          <tr key={issue.id}>
            <td><a target="_blank" href={"jira.com/browse/" + issue.supNumber}>{issue.supNumber} </a> </td> 
            <td>{issue.Airline}</td>
            <td>{issue.Product}</td>
            <td>{issue.Title}</td>
            <td>{issue.Status}</td>
            <td>{issue.DateHLERequestReceived}</td>
            <td>{issue.HLEDevDays}</td>
            <td>{issue.HLEClientDays}</td>
            <td>{issue.DateHLESent}</td>
            <td>{issue.DateHLEApprovedRefused}</td>
            <td>{issue.Comments}</td>
            <td>
                      <Link to={{
                        pathname: '/WorkInProgressHLEs/supNumber?=' + issue.supNumber,
                        state: {
                          supNumber: issue.supNumber,
                          HLEDevDays: issue.HLEDevDays,
                          HLEClientDays:issue.HLEClientDays,
                          DateHLESent: issue.DateHLESent,
                          DateHLEApprovedRefused: issue.DateHLEApprovedRefused,
                          Comments: issue.Comments,
                          Key: this.state.key,
                          Title: issue.Title
                        }
                      }}>
                      <ButtonToolbar>

                      <Button bsSize="xsmall" bsStyle="primary"> EDIT</Button>

                      </ButtonToolbar>
                      </Link>
             </td>
          </tr>
        ));
    };


<table>
             <thead>
                <th>SUP NUMBER</th>
                <th>AIRLINE</th>
                <th>PRODUCT</th>
                <th>TITLE</th>
                <th>STATUS</th>
                <th>DATE HLE REQUEST RECEIVED</th>
                <th>HLE DEV (DAYS)</th>
                <th>HLE CLIENT (DAYS)</th>
                <th>DATE HLE SENT</th>
                <th>DATE HLE APPROVED / REFUSED</th>
                <th>COMMENTS</th>
                <th>EDIT ROW</th>
              </thead>

              <tbody>
                  {
                    WorkInProgressHLEsDataFilter()
                  }
              </tbody>
</table>

Answer 1

position: Sticky 可用于实现此行为。您需要在browser demographic中检查这一点您正在寻求支持和使用 polyfill必要时。

以下代码片段在 @Zydnar 共享的 fiddle 中使用标记

.content-area {
  overflow-y: auto;
  height: 250px;
}

.body tr td {
  padding-top: 8px;
  padding-bottom: 4px;
}

.table {
  display: table;
}

.header {
  position: -webkit-sticky;
  position: sticky;
  display: table-caption;
  top: 0;
  margin-bottom: 0;
}

<div class="content-area">
  <table class="table">
    <thead class="header">
      <tr>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
      </tr>
    </thead>
    <tbody class="body">
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </tbody>
  </table>
</div>