位置：粘不能同时上下左右工作

Question

我正在尝试创建一个包含水平和垂直以及粘性标题和第一列的网格。

我使用它来使标题粘

 .thead {
     position: sticky;
     top: 0px;
 }

我使用它来使第一列变粘。

 div.tbody>div.tr>div:nth-child(1) {
    position: sticky;
    left: 0;
}
.thead>div>div:nth-child(1){
    left:0;
    top:0;
    position: sticky;
}

但我得到一个奇怪的滚动行为，第一列标题是左边粘，但不是顶部。

这是我使用的代码。如何让这个工作，以便第一个列标题将左侧和顶部？

.fixed_header {
  width: 300px;
  height: 300px;
  overflow: scroll;
}

.td,
.th {
  background-color: antiquewhite;
  width: 100px;
  float: left;
}

.thead {
  position: sticky;
  top: 0px;
}

.th {
  font-weight: bold;
}

.tr {
  display: block;
  clear: both;
  width: 500px;
}

.thead>div>div:nth-child(1) {
  left: 0;
  top: 0;
  position: sticky;
}

div.tbody>div.tr>div:nth-child(1) {
  position: sticky;
  left: 0;
}

<div class="fixed_header">
  <div class="thead">
    <div class="tr">
      <div class="th">Col 1</div>
      <div class="th">Col 2</div>
      <div class="th">Col 3</div>
      <div class="th">Col 4</div>
      <div class="th">Col 5</div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
  </div>
</div>

Answer 1

也许使用不同的结构并仅滚动内部行/列。添加了JQuery脚本以使其工作。

$( ".fixed_header" ).scroll(function() {
    var fixedHeader = $( ".fixed_header" );
    $( ".aaa" ).scrollTop(fixedHeader.scrollTop());
});

.fixed_header {
  width: 300px;
  height: 300px;
  overflow: scroll;
  display: flex;
  flex-direction: column;
}

.td,
.th {
  background-color: antiquewhite;
  width: 100px;
  float: left;
}

.thead {
  position: sticky;
  top: 0px;
}

.th {
  font-weight: bold;
}

.tr {
  display: block;
  clear: both;
  width: 500px;
}

.thead>div>div:nth-child(1) {
  left: 0;
  top: 0;

}

.content{
   position: relative;
   
}
.sticky-column{
    width: 100px;
    height: 280px;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
}

.data{
  margin-left: 100px;
}

.aaa{
  overflow: hidden;
  height: 2800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
      <div class="sticky-column">
        <div>
          <div class="th">Col 1</div>
        </div>
        <div class="aaa">
          <div class="td">row 1-0</div>
          <div class="td">row 2-0</div>
          <div class="td">row 3-0</div>
          <div class="td">row 4-0</div>
          <div class="td">row 5-0</div>
          <div class="td">row 6-0</div>
          <div class="td">row 7-0</div>
          <div class="td">row 1-0</div>
          <div class="td">row 2-0</div>
          <div class="td">row 3-0</div>
          <div class="td">row 4-0</div>
          <div class="td">row 5-0</div>
          <div class="td">row 6-0</div>
          <div class="td">row 7-0</div>
          <div class="td">row 1-0</div>
          <div class="td">row 2-0</div>
          <div class="td">row 3-0</div>
          <div class="td">row 4-0</div>
          <div class="td">row 5-0</div>
          <div class="td">row 6-0</div>
          <div class="td">row 7-0</div>
        </div>
      </div>
       <div class="data">
     

<div class="fixed_header">
  <div class="thead">
    <div class="tr">

      <div class="th">Col 2</div>
      <div class="th">Col 3</div>
      <div class="th">Col 4</div>
      <div class="th">Col 5</div>
    </div>
  </div>
  <div class="tbody">
    
        <div class="tr">
          
          <div class="td">row 1-1</div>
          <div class="td">row 1-2</div>
          <div class="td">row 1-3</div>
          <div class="td">row 1-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 2-1</div>
          <div class="td">row 2-2</div>
          <div class="td">row 2-3</div>
          <div class="td">row 2-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 3-1</div>
          <div class="td">row 3-2</div>
          <div class="td">row 3-3</div>
          <div class="td">row 3-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 4-1</div>
          <div class="td">row 4-2</div>
          <div class="td">row 4-3</div>
          <div class="td">row 4-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 5-1</div>
          <div class="td">row 5-2</div>
          <div class="td">row 5-3</div>
          <div class="td">row 5-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 6-1</div>
          <div class="td">row 6-2</div>
          <div class="td">row 6-3</div>
          <div class="td">row 6-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 7-1</div>
          <div class="td">row 7-2</div>
          <div class="td">row 7-3</div>
          <div class="td">row 7-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 1-1</div>
          <div class="td">row 1-2</div>
          <div class="td">row 1-3</div>
          <div class="td">row 1-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 2-1</div>
          <div class="td">row 2-2</div>
          <div class="td">row 2-3</div>
          <div class="td">row 2-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 3-1</div>
          <div class="td">row 3-2</div>
          <div class="td">row 3-3</div>
          <div class="td">row 3-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 4-1</div>
          <div class="td">row 4-2</div>
          <div class="td">row 4-3</div>
          <div class="td">row 4-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 5-1</div>
          <div class="td">row 5-2</div>
          <div class="td">row 5-3</div>
          <div class="td">row 5-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 6-1</div>
          <div class="td">row 6-2</div>
          <div class="td">row 6-3</div>
          <div class="td">row 6-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 7-1</div>
          <div class="td">row 7-2</div>
          <div class="td">row 7-3</div>
          <div class="td">row 7-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 1-1</div>
          <div class="td">row 1-2</div>
          <div class="td">row 1-3</div>
          <div class="td">row 1-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 2-1</div>
          <div class="td">row 2-2</div>
          <div class="td">row 2-3</div>
          <div class="td">row 2-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 3-1</div>
          <div class="td">row 3-2</div>
          <div class="td">row 3-3</div>
          <div class="td">row 3-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 4-1</div>
          <div class="td">row 4-2</div>
          <div class="td">row 4-3</div>
          <div class="td">row 4-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 5-1</div>
          <div class="td">row 5-2</div>
          <div class="td">row 5-3</div>
          <div class="td">row 5-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 6-1</div>
          <div class="td">row 6-2</div>
          <div class="td">row 6-3</div>
          <div class="td">row 6-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 7-1</div>
          <div class="td">row 7-2</div>
          <div class="td">row 7-3</div>
          <div class="td">row 7-4</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

删除“position：sticky;”在这两个地方，现在工作正常。

.thead>div>div:nth-child(1) {
left: 0;
top: 0;
}

div.tbody>div.tr>div:nth-child(1) {
left: 0;

这里修改了代码 -

.fixed_header {
  width: 300px;
  height: 300px;
  overflow: scroll;
}

.td,
.th {
  background-color: antiquewhite;
  width: 100px;
  float: left;
}

.thead {
  position: sticky;
  top: 0px;
}

.th {
  font-weight: bold;
}

.tr {
  display: block;
  clear: both;
  width: 500px;
}

.thead>div>div:nth-child(1) {
  left: 0;
  top: 0;
}

div.tbody>div.tr>div:nth-child(1) {
  left: 0;

<div class="fixed_header">
  <div class="thead">
    <div class="tr">
      <div class="th">Col 1</div>
      <div class="th">Col 2</div>
      <div class="th">Col 3</div>
      <div class="th">Col 4</div>
      <div class="th">Col 5</div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
  </div>
</div>

Answer 3

最终我能够通过给出thead z-index为1来解决它 - 这解决了没有任何javascript的问题

.fixed_header {
  width: 300px;
  height: 300px;
  overflow: scroll;
}

.td,
.th {
  background-color: antiquewhite;
  width: 100px;
  float: left;
}

.thead {
  position: sticky;
  top: 0px;
  z-index:1;
}

.th {
  font-weight: bold;
}

.tr {
  display: block;
  clear: both;
  width: 500px;
}

.thead>div>div:nth-child(1) {
  left: 0;
  top: 0;
  position: sticky;
  
}

div.tbody>div.tr>div:nth-child(1) {
  position: sticky;
  left: 0;
  
}

<div class="fixed_header">
  <div class="thead">
    <div class="tr">
      <div class="th">Col 1</div>
      <div class="th">Col 2</div>
      <div class="th">Col 3</div>
      <div class="th">Col 4</div>
      <div class="th">Col 5</div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
  </div>
</div>