CODEWITHSUNDEEP
javascripthtmlcssfrontendsticky
user15611247
user15611247

Reputation:

Position sticky to make table rows stick to each other

Hello I am trying to make table with columns that will be able to stick to each other while I am scrolling horizontally. I am using position sticky and it works correctly with the first column, problem starts when the second or third columns are added. Especially that other columns are always different width which makes me unable to use same width multiplied by number of columns.

Can I make them sticky to each other without knowing what width will they be? And is there possibility to make text appear on top of other without them colliding with each other and making a unreadable mess?

.sticky-col {
  position: sticky !important;
  z-index: 1000;
  top: 0;
  align-self: flex-start;
  left: 0;
}
<table style="width:2000px" border="1">
  <tr>
    <th class="sticky-col">Firstname</th>
    <th class="sticky-to-left-elem">Lastname</th>
    <th>Age</th>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td class="sticky-col">Jill</td>
    <td class="sticky-to-left-elem">Smith</td>
    <td>50</td>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td class="sticky-col">Eve</td>
    <td class="sticky-to-left-elem">Jackson</td>
    <td>94</td>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td class="sticky-col">Eve</td>
    <td class="sticky-to-left-elem">Jackson</td>
    <td>94</td>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td class="sticky-col">Eve</td>
    <td class="sticky-to-left-elem">Jackson</td>
    <td>94</td>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Js fiddle https://jsfiddle.net/e0xc69dg/

Upvotes: 0

Views: 802

Answers (2)

Legarndary
Legarndary

Reputation: 967

Change the left property of the second and third columns. Try 100px in your example, then I will stick 100px from the left.

You also need to fiddle a little bit with some background color and maybe some text-align of the table headers.

Upvotes: 0

Charles Lavalard
Charles Lavalard

Reputation: 2321

You had a good start you can apply your style to all the td and tr

td,
th {
  position: sticky;
  top: 0;
  align-self: flex-start;
  left: 0;
  background-color: #fff;
}
<table style="width:2000px" border="1">
  <tr>
    <th class="sticky-col">Firstname</th>
    <th class="sticky-to-left-elem">Lastname</th>
    <th>Age</th>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td class="sticky-col">Jill</td>
    <td class="sticky-to-left-elem">Smith</td>
    <td>50</td>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td class="sticky-col">Eve</td>
    <td class="sticky-to-left-elem">Jackson</td>
    <td>94</td>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td class="sticky-col">Eve</td>
    <td class="sticky-to-left-elem">Jackson</td>
    <td>94</td>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td class="sticky-col">Eve</td>
    <td class="sticky-to-left-elem">Jackson</td>
    <td>94</td>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Upvotes: 1

Related Questions