Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Sticky columns with scrollable columns not overlapping

R

richarddunnebsc

Coder
I have a table with 10 columns and 10 rows and a header row.
I want the header row, first three columns and last column to be sticky, sticky columns 100px width.
It seems table-layout fixed works with fixed column width, but does not prevent scrollable columns from overlapping.
The vertical scrolling works, but the horizontal scrollbar doesn't display.
The container div has a class "container), no other internal CSS. Appreciate any guidance on this

This is my html

HTML: 
<div class="container">     
        <table>
            <thead>
                <tr>
                    <th>Filler</th><th>Filler</th><th >Filler</th>
                    <th>Filler</th><th>Filler</th><th>Filler</th><th>Filler</th>
                    <th>Filler</th><th>Filler</th><th>Filler</th><th>Filler</th>
                    <th>Filler</th><th>Filler</th><th>Filler</th><th>Filler</th>
                    <th>Filler</th><th>Filler</th><th>Filler</th><th>Filler</th>
                    <th>Filler</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Filler</td><td>Filler</td><td>Filler</td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td>Filler</td>
                </tr>
                <tr>
                    <td >Filler</td><td>Filler</td><td>Filler</td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td>Filler</td>
                </tr>
                <tr>
                    <td>Filler</td><td>Filler</td><td>Filler</td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td>Filler</td>
                </tr>
                <tr>
                    <td>Filler</td><td>Filler</td><td>Filler</td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td>Filler</td>
                </tr>
                <tr>
                    <td>Filler</td><td>Filler</td><td>Filler</td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td>Filler</td>
                </tr>
                <tr>
                    <td>Filler</td><td>Filler</td><td>Filler</td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td>Filler</td>
                </tr>
                <tr>
                    <td>Filler</td><td>Filler</td><td>Filler</td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td>Filler</td>
                </tr>
                <tr>
                    <td>Filler</td><td>Filler</td><td>Filler</td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td>Filler</td>
                </tr>
                <tr>
                    <td>Filler</td><td>Filler</td><td>Filler</td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td>Filler</td>
                </tr>
                <tr>
                    <td>Filler</td><td>Filler</td><td>Filler</td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td>Filler</td>
                </tr>
                <tr>
                    <td>Filler</td><td>Filler</td><td>Filler</td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td>Filler</td>
                </tr>
                <tr>
                    <td>Filler</td><td>Filler</td><td>Filler</td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td>Filler</td>
                </tr>
                <tr>
                    <td>Filler</td><td>Filler</td><td>Filler</td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td>Filler</td>
                </tr>
                <tr>
                    <td>Filler</td><td>Filler</td><td>Filler</td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td></td><td></td><td></td><td></td>
                    <td>Filler</td>
                </tr>
            </tbody>
        </table>
    </div>

This is my CSS so far



CSS: 
.container{
    height: 300px;
    width: 80%;
    margin: auto;
    overflow-y: scroll;
    overflow-x: scroll;
    position: relative;
    border: solid;
}

table{
    table-layout: fixed;
    width: 100%;
    border-spacing: 0;
}

th,td{
    padding: 0;
    text-align: center;
}

table thead th{
    z-index: 1;
}

thead{
    position: sticky;
    top: 0;
    background-color: white;
}

tr th{
    width: auto;
    margin: 0;
}


th:nth-child(-n+3),
th:last-child,
td:nth-child(-n+3),
td:last-child{
    width: 100px;
    position: sticky;
    top: 0;
    
}
 
Sort by date Sort by votes
Hey there!
It looks like you’re almost there. To fix the scrollbar issue, ensure your table is wider than the container by setting its width to something like 150%. For the sticky columns overlapping, adding a z-index: 2 and a background: white should resolve that and make things clean.
Do get back to me on this
CSS: 
th:nth-child(-n+3),
th:last-child {
    z-index: 2;
    background: white;
}
 
Upvote 0 Downvote
Zakwan@MTH said:
Hey there!
It looks like you’re almost there. To fix the scrollbar issue, ensure your table is wider than the container by setting its width to something like 150%. For the sticky columns overlapping, adding a z-index: 2 and a background: white should resolve that and make things clean.
Do get back to me on this
CSS: 
th:nth-child(-n+3),
th:last-child {
    z-index: 2;
    background: white;
}
Click to expand...
Its actually the scrollable columns that are overlapping without table layout fixed, not the sticky columns. I gave the table a width or 150%, but its not having any affect. The horizontal scrollbar is only displayed when table layout is not set, and when its not, the sticky column width reverts to auto. Appreciate the help.
 
Upvote 0 Downvote
This is my header
HTML: 
<div id="table-scroll" class="table-scroll">
        <table id="main-table" class="main-table">
          <thead>
            <tr>
              <th class="col col1" scope="col">Header 1</th>
              <th class="col col2" scope="col">Header 2</th>
              <th class="col col3" scope="col">Header 3 with longer content</th>
              <th scope="col">Header 4 text</th>
              <th scope="col">Header 5</th>
              <th scope="col">Header 6</th>
              <th scope="col">Header 7</th>
              <th scope="col">Header 8</th>
              <th scope="col">Header 9</th>
              <th scope="col">Header 10</th>
              <th scope="col">Header 11</th>
              <th scope="col">Header 12</th>
              <th scope="col">Header 13</th>
              <th scope="col">Header 14</th>
              <th scope="col">Header 15</th>
              <th class="col collast" scope="col">Header 16</th>
            </tr>
          </thead>

This is what each row looks like
HTML: 
<tr>
              <td class="col col1">1 First top Column</td>
              <td class="col col2">2 Cell content </td>
              <td class="col col3">3 <a href="#">Cell content longer</a></td>
              <td>4 Cell content with more content and more content </td>
              <td>5 Cell content</td>
              <td>6 Cell content</td>
              <td>7 Cell content</td>
              <td>8 Cell content</td>
              <td>9 Cell content with more content and more </td>
              <td>10 Cell content</td>
              <td>11 Cell content</td>
              <td>12 Cell content with more content </td>
              <td>13 Cell content</td>
              <td>14 Cell content</td>
              <td>15 Cell content</td>
              <td class="col collast">16 Cell content</td>
            </tr>

This is the CSS
CSS: 
html {
    box-sizing: border-box;
  }
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  .intro {
    max-width: 1280px;
    margin: 1em auto;
  }
  .table-scroll {
    
    margin-top: 100px;
    width: 80%;
    z-index: 1;
    margin: auto;
    overflow: auto;
    height: 600px; 
  }
  .table-scroll table {
    width: 100%;
    margin: auto;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    word-wrap: break-word;
  }
  .table-wrap {
    position: relative;
  }
  .table-scroll th,
  .table-scroll td {
    padding: 5px 10px;
    border: 1px solid #000;
    background: #fff;
    vertical-align: top;
    width: 100px;
  }
  .table-scroll thead th {
    background: #333;
    color: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

.col {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 1;
    width: 100px;
  }
  tbody .col {
    background: #ccc;
  }
  .col2 {
    left: 100px;
  }
  .col3 {
    left: 200px;
  }
  .collast {
    left: auto;
    right: 0;
  }
  thead .col,
  .table-scroll tfoot .col {
    z-index: 6;
  }

The horizontal scrolling works, but only the headers (th) of the scrollable columns (col 4 to second last) are sticking when scrolling vertically, Cannot figure out why all are not sticking.
 
Upvote 0 Downvote
To fix the sticky column issue, you need to set position: sticky for both the header and body cells, and also make sure that each sticky column has a fixed width of 100px. For this, you should apply width: 100px to both the th and td elements. Also, add overflow-x: auto to the container to ensure horizontal scrolling works. To prevent overlapping columns, position the sticky columns with left: 0, left: 100px, and left: 200px for the first three and last column. Finally, make sure z-index is set properly, so the sticky columns stay on top.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom