Question

似乎sticky在<td>上不适用于colspan。有办法解决吗？

body {
  font-family: 'Lucida Grande';
}

div {
  width: 500px;
  height: 200px;
  overflow: scroll;
}

td,
th {
  padding: 2px 5px;
  white-space: nowrap;
}

.sticky-header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background: #146775;
  color: white;
  z-index: 3;
}

.sticky-header:first-child {
  left: 0;
  z-index: 4;
}

.sticky-row {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  top: 23px; /* This seems to work differently for Safari, FF, Chrome etc. Here adjusted for FF */
  background: #1C4464;
  color: white;
  z-index: 3;
}
.sticky-row:nth-child(2) {
  left: 100px; /* How can I make this dynamic? */
  z-index: 2;
}
span {
  position: absolute;
  top: 2px;
  left: 113px;
}

.sticky-column {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  background: #569CA8;
  color: white;
  z-index: 1;
  width: 100px; /* How can I make this dynamic? */
}

<div>
  <table cellspacing="0">
    <thead>
      <tr>
        <td class="sticky-header">Header 1</td>
        <td class="sticky-header">Header 2</td>
        <td class="sticky-header">Header 3</td>
        <td class="sticky-header">Header 4</td>
        <td class="sticky-header">Header 5</td>
        <td class="sticky-header">Header 7</td>
        <td class="sticky-header">Header 8</td>
        <td class="sticky-header">Header 9</td>
        <td class="sticky-header">Header 10</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sticky-row">Sticky Row 1</td>
        <td class="sticky-row" colspan="9">How can I make this sticky?</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-row">Sticky Row 2<span>Dirty way of making sticky</span></td>
        <td class="sticky-row" colspan="9"></td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-row">Sticky Row 3</td>
        <td class="sticky-row" colspan="9">How can I make this sticky?</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
      <tr>
        <td class="sticky-column">Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 7</td>
        <td>Column 8</td>
        <td>Column 9</td>
        <td>Column 10</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

实际上，它已经发粘了，问题是由于td的宽度，没有理由移动它。因此，要使它们都变粘，请在第二个td上更改 colspan （以使其更好地也留有50px的间距，以使它们彼此相邻移动）。希望这能回答您的问题。

更新：

第二个td上的colspan就是为什么您的代码不起作用的原因，我通过将结构替换为此来解决了这个问题

<tr class="darkblue">
    <td class="sticky-row">Sticky Row 1</td>
    <td class="sticky-row" colspan>How can I make this sticky?</td>
    <td colspan="8"></td>
  </tr>

并添加了一个额外的CSS类以修复tr的背景颜色

.darkblue {
  background: #1C4464;
  width: 100%;
}

.sticky-row {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  top: 23px;
  color: white;
  z-index: 3;
}

下面提供完整的代码供参考

    body {
  font-family: 'Lucida Grande';
}

div {
  width: 500px;
  height: 200px;
  overflow: scroll;
}

td,
th {
  padding: 2px 5px;
  white-space: nowrap;
}

.sticky-header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background: #146775;
  color: white;
  z-index: 3;
}

.sticky-header:first-child {
  left: 0;
  z-index: 4;
}

.darkblue {
  background: #1C4464;
  width: 100%;
}

.sticky-row {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  top: 23px;
  /* background: #1C4464; */
  color: white;
  z-index: 3;
}
.sticky-row:nth-child(2) {
  left: 100px; /* How can I make this dynamic? */
  z-index: 2;
}
span {
  position: absolute;
  top: 2px;
  left: 113px;
}

.sticky-column {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  background: #569CA8;
  color: white;
  z-index: 1;
  width: 100px; /* How can I make this dynamic? */
}

<div>
  <table cellspacing="0">
<thead>
  <tr>
    <td class="sticky-header">Header 1</td>
    <td class="sticky-header">Header 2</td>
    <td class="sticky-header">Header 3</td>
    <td class="sticky-header">Header 4</td>
    <td class="sticky-header">Header 5</td>
    <td class="sticky-header">Header 7</td>
    <td class="sticky-header">Header 8</td>
    <td class="sticky-header">Header 9</td>
    <td class="sticky-header">Header 10</td>
  </tr>
</thead>
<tbody>
  <tr class="darkblue">
    <td class="sticky-row">Sticky Row 1</td>
    <td class="sticky-row" colspan>How can I make this sticky?</td>
    <td colspan="8"></td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr  class="darkblue">
    <td class="sticky-row">Sticky Row 2<span>Dirty way of making sticky</span></td>
    <td class="sticky-row" colspan="9"></td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-row">Sticky Row 3</td>
    <td class="sticky-row" colspan="9">How can I make this sticky?</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
  <tr>
    <td class="sticky-column">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
    <td>Column 5</td>
    <td>Column 7</td>
    <td>Column 8</td>
    <td>Column 9</td>
    <td>Column 10</td>
  </tr>
</tbody>
  </table>
</div>

Answer 2

这是您原始问题的解决方案。 如果您有不同的问题并不断更改问题，尝试帮助将毫无用处

position: sticky不适用于表格元素。由于top和bottom在表格元素中不起作用，我们可以做的是非粘性td的行高，这样sticky td就不会t与non-sticky td

重叠

<div>
    <table>
        <tr>
            <td class="sticky left">Sticky</td>
            <td class="sticky" colspan="9">How can I make this sticky?</td>
        </tr>
        <tr class="tableBody">
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
        </tr>
    </table>
</div>

添加class left，以保留左侧的粘性td。同样，在其他left中管理td的值。另外，在此示例中，为非粘性class添加一些td作为tableBody：

div {
  width: 300px;
  overflow: scroll;
}
.sticky {
  position: fixed;
  left: 50px;
  background: white;
}
.left{
  left:0;
}
tr.tableBody
{
   line-height:50px;
}

最后添加所需的CSS。

Please check this DEMO Fiddle Here

在colspan上保持粘性？

2 个答案: