Position Sticky on <td> with colspan?

user_3234322 0
Viewed 7445

It seems like sticky doesn't work on <td> with colspan. Is there a way around it?

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>

css html javascript
2 Answers

Actually it's already sticky, the problem is due to the width of the td there is no reason for it to move. So to make them both sticky change the colspan on the second td (to make it even better give it also a left of 50px to make them move next to each other). Hope this awnsered your question.

UPDATE:

the colspan on the 2nd td is why your code doesn't work, i fixed this by replacing the structure to this

<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>

and added an extra css class to fix the background color of the tr

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

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

Full code for reference down below 

    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>

user_40694380

Here is the Solution for your original Question. Trying to help would be useless if you have a varying Question and keep changing the Question

position: sticky doesn't work with table elements. Since, top and bottom doesn't work in table elements what we can do is line height of the non sticky td so that sticky td wouldn't overlap over 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>

Add class left for the sticky td that remains on the left side. Similarly manage the value of left in other td . Also, add some class for non sticky td as tableBody in this example:

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

Finally add your desired CSS.

Please check this DEMO Fiddle Here

user_98106760
Related