CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap-3
Glyn
Glyn

Reputation: 2005

The HTML table sticky columns and rows stop working when I add css to keep the table within the page boundaries

I have a large table that is scrolling on the horizontal and vertical with the first column sticky and the three header rows sticky. This works to a point. However the table extends past the right side of the screen.

enter image description here

I would like it to remain in the boundaries of the screen. From the image you can see I have two issues:

  1. The table extends past the end of the screen on the right
  2. The Name heading is behind the list of names when scrolled (this does not happen in the attached jfiddle)

When I add this css:

table {
    display: block;
    overflow: scroll;
}

The table is within the boundary of the screen; however the sticky on the heading rows does not work. The left column sticky is also not as good (please see the image).

enter image description here

Please see my attempt at a jfiddle; however, I can not get the Bootstrap to work (I included the cdns).

https://jsfiddle.net/Glyndwr/2tfLu87a/11/

My aim is to have the:

  1. Table stay within the boundaries of the screen
  2. Top heading rows and left column stick when I scroll
  3. Name heading remain in front when I scroll

A bit more of an explanation relating to making the "Name" cell in the top right corner sticky. This is the starting position:

enter image description here

When I scroll right the "Name" column is in front, which is correct:

enter image description here

However, when I scroll down the "Name" cell does not stick:

enter image description here

So what I need is for the "Name" cell to stick on both scroll right and down.

Upvotes: 1

Views: 10145

Answers (2)

Yong
Yong

Reputation: 1685

You can set/make the thead itself sticky instead of individual rows/trs. As for the names in the row, since they're first-child of each tbody's trs you can select them and apply styles, like so:

tbody>tr>td:first-child{
  background: red;
  position: sticky;
  left: 0;
}

You can then wrap the table inside a block container to give it vertical and horizontal scrolling. See the CSS example below:

.table-wrapper{
  margin: 0 auto;
  display: block;
  width: 98vw;
  height: 95vh;
  overflow: auto;
  border: 1px solid black;
}

I've edited your jsfiddle here.

Upvotes: 1

Glyn
Glyn

Reputation: 2005

A partial answer. Still need to figure out how to fix my main issue of keeping the table within the screen. Answer to the "Name" cell issue is partly answered by @Yong.

Replace:

table thead tr.first th {
    padding: 3px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    background: white;
}

table thead tr.second th {
    padding: 3px;
    position: -webkit-sticky;
    position: sticky;
    z-index: 1;
    background: white;
}

table thead tr.third th {
    padding: 3px;
    position: -webkit-sticky;
    position: sticky;
    z-index: 1;
    background: white;
}

With Yong's code (I came up with replacing z-index: 1 with z-index-3):

thead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 3;/*replace 1 with 3 */
    background: white;
    border: 1px solid black;
}

This also makes the code a lot simpler. We could also replace the original code's z-index: 1 with z-index-3.

Upvotes: 0

Related Questions