CSS - table data not going under fixed table header - Overflow-X

Question

In the Table Fixed Header, I need the all text to go under the fixed header and for the fixed header not to misalign. This works for everything in the second table. However all content in the 2nd table is within the 98% width.

In the 1st table, I have a TD tag where white-space:nowrap keeps all content on 1 line, so when the overflow-x occurs, the fixed header becomes misaligned. How can I fix this fixed header to match the table header and not be misaligned?

So I need this to work when the Overflow-X: Auto occurs. I want the horizontal scrolls so that is fine, but it is the fixed header that gets jumbled.

You may have to change the size of your viewpoint to see this occur

I believe it is probably in the CSS or JQUERY where I need to make the adjustment but cannot figure out how to adjust ....

JSFIDDLE https://jsfiddle.net/rbla/1Ljuycbe/61/

.up:hover {
    cursor:pointer;
}

.tooltip2 {
    position: relative;
    display: inline-block;
    border-bottom: 3px dotted black; /* If you want dots under the hoverable text */
    text-decoration: none; 
    color: #00F;
}

img.cadre {
    border: 3px solid #D2D1D1; 
    border-radius: 4px; 
    width: 125px;
    height: 125px;
}

.tooltip2 .tooltiptext2 { 
    visibility: hidden;
    width: 130px;
    background-color: #fff;
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    border-radius: 6px;
    margin-left: 7px;
    position: absolute;
    z-index: 0;
}

.tooltip2:hover .tooltiptext2 {
    visibility: visible;
    cursor:pointer;
 }

.tooltip2 .tooltiptext2 { 
    top: -5px;
    left: 105%; 
 }

 /* Left Arrow */
.tooltip2 .tooltiptext2::after {
     content: " ";
     position: absolute;
     top: 15px;
     right: 100%; /* To the left of the tooltip */
     margin-top: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: transparent white transparent transparent;
 }

  table.blue.fixed {
     z-index: 99;
 }

maybe just use a regular table, position:sticky on th, and no javascript at all? — Facundo Corradini
– Facundo Corradini, Commented Oct 2, 2018 at 13:01

scooterlord · Accepted Answer · 2018-10-02 07:22:18Z

3

Well, solution to your specific problem is fairly simple; however, there can be vast improvements to your code, eg instead of cloning the whole table and removing the tbody, etc, but I guess this is out of the scope of this question.

Just add these few css lines:

.blue.fixed {
  width:100%;
  table-layout:fixed;
}

https://jsfiddle.net/1Ljuycbe/84/

answered Oct 2, 2018 at 7:22

scooterlord

15.4k11 gold badges54 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vlad · Accepted Answer · 2018-10-05 22:09:50Z

1

+50

$t_fixed.css("width",$this.outerWidth()+"px");
$this.parent().on( 'scroll', function(){
  $t_fixed.css("left",(($this.parent().scrollLeft())*-1)+"px");
});
$( window ).resize(function() {
    $t_fixed.css("width",$this.outerWidth()+"px");
});

There are three thing that you need changed to make this work.

1) The width of the table has to match the width on the original table. The first line of code fixes the column position.

2) When you scroll the table the columns will not match unless you move the cloned header row with the scrolling.

3) ".resize" will fix the table when the viewport is resized.

fiddle

edited Oct 5, 2018 at 22:09

answered Oct 2, 2018 at 12:43

Vlad

4745 silver badges9 bronze badges

7 Comments

Ronald Over a year ago

Im wondering what going on with the left postioning ---> - 10)*-1)+"px");

Vlad Over a year ago

There is a scroll bar on the table. So when the table is scrolled to the left and right the floating header moves with it. the -10 is the margin or padding and the minus 1 moves the floating header to the left which is opposite from the scroll which scrolls to the right.

vals Over a year ago

Seems to be a very good answer. I wonder why it hasn't been accepted ?

Ronald Over a year ago

@Vlad - in my example, the -10 is makes the floating header offmark - I am using this instead - $t_fixed.css("left",(($this.parent().scrollLeft())*-1)+"px"); - One thing that was key for me was to add this CSS box-sizing: border-box; to the TH and TD elements.

Vlad Over a year ago

@Ronald - Added a "resize" listener to adjust table header.

|

Collectives™ on Stack Overflow

CSS - table data not going under fixed table header - Overflow-X

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related