css

Question

我有这个HTML

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  text-align: center;
  padding: 5px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  background: red;
}

<body>
  <div class="table">
    <div class="row">
      <div class="cell sticky"><span>Header Row 1</span>
      </div>
    </div>
    <div class="row">
      <div class="cell sticky"><span>Header Row 2</span>
      </div>
    </div>
    <div class="row">
      <div class="cell">Detail Row 1</div>
    </div>
    <div class="row">
      <div class="cell">Detail Row 2</div>
    </div>
    <div class="row">
      <div class="cell">Detail Row 3</div>
    </div>
  </div>
</body>

它使 second Header Row sticky - 正如预期的那样 - 但如果我希望 both Header Rows 粘在顶部怎么办彼此的？ - 这样当用户滚动页面时这两行总是可见的？

Answer 1

我在单个粘滞行中添加了 headers。

.table {
    display: table;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    text-align: center;
    padding: 5px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.sticky1, .sticky2, sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    background: red;
}

<div class="table">
    <div class="row">
        <div class="cell sticky1"><span>Header Row 1</span>
        <div class="cell sticky2"><span>Header Row 2</span>
        </div>
    </div>
    <div class="row">
        </div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 1</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 2</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
    <div class="row">
        <div class="cell">Detail Row 3</div>
    </div>
</div>

Answer 2

正如我在评论中提到的，您需要为第二个粘性块设置 top。而这个top应该等于第一个sticky的height。您可以使用伪 class :nth-child().

定义粘性块的每个父级

30px 是第一个粘性块的近似高度。

看看css代码，你就会明白我的意思了。

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  text-align: center;
  padding: 5px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  background: red;
}

.row:nth-child(1) .sticky {
  top: 0px;
} 

.row:nth-child(2) .sticky {
  top: 30px;
}

Answer 3

我有不同的方法。我建议 table 基本结构而不是使用 div 基本结构。

table {
  text-align: left;
  position: relative;
  border-collapse: collapse; 
}
th, td {
  padding: 0.25rem;
}
tr.red th {
  background: red;
  color: white;
}
tr.green th {
  background: green;
  color: white;
}
tr.purple th {
  background: purple;
  color: white;
}
th {
  background: white;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

<table>
  <thead>
    <tr class="red">
      <th>Header Row 1</th>
      <th>Header Row 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    <tr>
      <td>Header Detail 1.</td>
      <td>Header Detail 2.</td>
    </tr>
    
  </tbody>
</table>

如果你还想使用DIV结构，这里有一个例子。

.wrap {
  height: 80vh;
  position: relative;
  overflow: scroll;
  margin: 10em auto 20em;
  max-width: 960px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /*overscroll-behavior: contain;*/
}

.scenes {
  display: flex;
  flex-wrap: nowrap;
}

.track {
  flex: 1 0 calc(22% + 7px);
  scroll-snap-align: start;
}

.track + .track {
  margin-left: -1px;
}

.heading {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  border: solid #fff;
  border-width: 0 1px;
  z-index: 1;
  background: #efefef;
  font-weight: 700;
}

.entry {
  border: 1px solid #ebebeb;
  border-top: 0;
  background: #fff;
  height: 8em;
  padding: 1em;
}


@media (max-width: 767px) {
  .track {
    flex: 1 0 calc(50% + 7px);
  }
}

<div class="wrap">
  <div class="scenes">
    <div class="track">
      <div class="heading">Heading 1</div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
    </div>
    <div class="track">
      <div class="heading">Heading 2</div>
      
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
    </div>
    <div class="track">
      <div class="heading">Heading 3</div>
      
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
    </div>
    <div class="track">
      <div class="heading">Heading 4</div>
      
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
    </div>
    <div class="track">
      <div class="heading">Heading 5</div>
      
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
    </div>
    <div class="track">
      <div class="heading">Heading 6</div>
      
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
    </div>
    <div class="track">
      <div class="heading">Heading 7</div>
      
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem ipsum dolor sit.</h3>
      </div>
    </div>
  </div>
</div>

Answer 4

在真实的 table 中，您将使用 thead 或 tbody 或 tfoot 标签将几行组合在一起以将它们粘在一起。 table-row-group 可通过 CSS 模仿 tbody 行为：

https://developer.mozilla.org/en-US/docs/Web/CSS/display

table-row-group

table-header-group

table-footer-group

These elements behave like HTML elements.

下面的可能示例保持 table-布局并处理行组而不是单个行：

.table {
  display: table;
}

/*new */
.header-row-group {
  display: table-header-group;
  font-weight:bold;
}
/* end new */
.row {
  display: table-row;
}

.cell {
  display: table-cell;
  text-align: center;
  padding: 5px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  background: red;
}

<body>
  <div class="table">
    <div class="header-row-group sticky"><!-- header row group added -->
      <div class="row">
        <div class="cell "><span>Header Row 1</span></div> <div class="cell">header Row 1</div>
      </div>
      <div class="row">
        <div class="cell "><span>Header Row 2</span></div> <div class="cell">Wider Cell on  Row 2</div>
      </div>
    </div>
    
    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>
    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>    <div class="row">
      <div class="cell">Detail cell</div> 
      <div class="cell">Detail cell</div>
    </div>
  </div>
</body>

css - 使 2 display:table 行彼此粘在一起

css - make 2 display:table-row sticky on top of each other

html

sticky