html - 两个粘性行和一个粘性列

Question

我有这样一个 3 行的帽子，我该如何修复它，尝试了不同的选项，但是合并的单元格发生了变化

我尝试了不同的方法，但我无法修复这种标题，这是我如何尝试的一个例子

.table-scrolGridTerminal tr:nth-child(1) {
        position: sticky;
        top: 0;
    }
.table-scrolGridTerminal tr:nth-child(2) {
    position: sticky;
    top: 25px;
}
.table-scrolGridTerminal tr:nth-child(3) {
    position: sticky;
    top: 50px;
}

<table class="table-scrolGridTerminal" cellspacing="0" rules="all" name="GridView3" border="1" id="MainContent_GridView3" style="width:100%;border-collapse:collapse;">
    <tbody>
      <tr>
        <th colspan="9">header</th>
      </tr>
    <tr style="background-color:Gray;font-weight:bold;">
      <th class="centre_align" rowspan="2">№ ktk</th>
      <th class="centre_align" colspan="2">arrival</th>
      <th class="centre_align" rowspan="2">№ auto</th>
    </tr>
    <tr style="background-color:Gray;font-weight:bold;">
      <th scope="col">date</th>
      <th scope="col">time</th>
    </tr>
    <tr style="color:#333333;background-color:#F7F6F3;">
      <td>5122073</td>
      <td>
          <span id="MainContent_GridView3_Label2_0">15.10.2019</span>
      </td>
      <td>
          <span id="MainContent_GridView3_Label3_0">08:27:06  </span>
      </td>
      <td>
        12548
      </td>
    </tr>
  </tbody>
</table>

Answer 1

theader 的一部分在 tbody 中。所以我认为你需要使用嵌套表。

.stickyHeader{
    position:sticky;
    top:0px;
    background-color:gray;
    height:20px;
}

.stickySecondRowHeader{
    position:sticky;
    top:20px;
    background-color:gray;
    height:20px;
}

table{
  width:100%;
  border-collapse:collapse;
}

#ktkHeader{
  height:40px;
}

#childTableContainer{
  overflow-y:auto;
  max-height:150px;
  padding:0px;
  border: 1px solid black;
}

thead{
  background-color:gray;
}

th{
  outline: 1px solid gray;  
}

thead, td{
  height:20px;
}

<table cellspacing="0" rules="all" style="border:1px solid black;">
  <thead>
    <tr>
      <th colspan="4">header</th>
    </tr>           
  </thead>
  <tbody>
    <tr>
      <th rowspan="1" id="ktkHeader" class="stickyHeader">№ ktk</th>
      <th rowspan="2">
        <div id="childTableContainer">
          <table rules="all" border="0" cellspacing="0" cellpadding="0">
            <thead>
              <tr>
                <th colspan="2" class="stickyHeader">arrival</th>
                <th rowspan="2" class="stickyHeader">auto</th>
              </tr>
              <tr>
                <th class="stickySecondRowHeader">date</th>
                <th class="stickySecondRowHeader">time</th>
              </tr>
            </thead>
            <tbody>         
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>     
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>  
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>  
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>  
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>  
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>  
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>  
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>  
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>              
            </tbody>
          </table>
        </div>
      </th>       
    </tr>
    <tr>
      <th>5122073</th>
    </tr>
  </tbody>
</table>