How to correct strange margin error in fixed-column of HTML table?

Question

I have been following the information I could gather (for example here) and built an HTML table, that has its first column fixed, with CSS only. Unfortunately the fixed column is positioning itself a good few pixels lower than the rest of the content and I cannot figure out why.

Here is the code: JSFiddle link. What am I doing wrong?

Tried the following things:

Changed cell size, margin, padding and border settings
Replaced position: absolute with float: left
Tried placing the scrolling on other element
Added/removed content
margin-top: -16px; does not fix the problem, because the distance changes with the height of the cells

.table 
{
  border-collapse:collapse;
  border: 1px solid grey; 
  display: table;
}

.tr
{
  display: table-row;
}

.th
{
  display: table-cell;
  border:1px solid grey;   
  white-space:nowrap;
  font-weight: bold;
}

.td 
{
  display: table-cell;
  border:1px solid grey;   
  white-space:nowrap;
  margin:0;
}

.wrapper 
{ 
  overflow-x:scroll;  
  margin-left:100px; 
  overflow-y:visible;  
}

.wrapper-outer
{ 
  position: relative;
  width: 300px;
}

.fixed {
  position:absolute; 
  width:100px; 
  left:0;
  top:auto;
}

<div class=wrapper-outer>
<div class="wrapper">
    <div class="table">
        <div class="tr">
            <div class="th fixed">Fixed 1</div>
            <div class="th">Lorem ipsum dolor</div>
            <div class="th">Ipsum</div>
            <div class="th">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 1</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 2</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 3</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 4</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 5</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
    </div>
</div>
</div>

Another solution, I guess, would be to make 2 tables - 1 with just the left most "fixed" column, and the the other right next to it with all the other content. — J. Titus, May 05 '16 at 12:29
Looks like this will be my solution in the end. Still, I wish to know where that top distance originates from. — Germstorm, May 05 '16 at 12:42

J. Titus · Answer 1 · 2016-05-05T12:15:46.147

1

Add this to your CSS:

.th.fixed {
    top: 0;
}

Updated Fiddle

(Working in Chrome - doesn't look right in FireFox)

edited May 05 '16 at 12:15

answered May 05 '16 at 12:05

J. Titus

9,535
1
32
45

And what about rest of `.td.fixed`? – Justinas May 05 '16 at 12:07
The rest look fine, so... nothing? – J. Titus May 05 '16 at 12:08
Well, on Firefox I see gap between first row and second – Justinas May 05 '16 at 12:09
@Justinas what about them? The issue just required fixing the first row of the first column – lucasreta May 05 '16 at 12:09
Yeah, just realized that also. – J. Titus May 05 '16 at 12:09
@porjolovsky *the fixed **column** is positioning* – Justinas May 05 '16 at 12:12

score 1 · Answer 2 · edited May 05 '16 at 12:16

1

I have added margin-top for fixed td and it worked

http://jsfiddle.net/g77nLu5w/11/

edited May 05 '16 at 12:16

Germstorm

9,709
14
67
83

answered May 05 '16 at 12:10

sacgro

459
2
5

Unfortunately the 16px distance changes with the height of the cells so it cannot be hard-coded. – Germstorm May 05 '16 at 12:12
replace it with margin-top:-5%; – sacgro May 05 '16 at 18:39

score 0 · Answer 3 · answered May 05 '16 at 12:11

Apply .fixed {margin-top: -16px}

.table 
{
  border-collapse:collapse;
  border: 1px solid grey; 
  display: table;
}

.tr
{
  display: table-row;
}

.th
{
  display: table-cell;
  border:1px solid grey;   
  white-space:nowrap;
  font-weight: bold;
}

.td 
{
  display: table-cell;
  border:1px solid grey;   
  white-space:nowrap;
  margin:0;
}

.wrapper 
{ 
  overflow-x:scroll;  
  margin-left:100px; 
  overflow-y:visible;  
}

.wrapper-outer
{ 
  position: relative;
  width: 300px;
}

.fixed {
  position:absolute; 
  width:100px; 
  left:0;
  top:auto;
  margin-top: -16px;
}

<div class=wrapper-outer>
<div class="wrapper">
    <div class="table">
        <div class="tr">
            <div class="th fixed">Fixed 1</div>
            <div class="th">Lorem ipsum dolor</div>
            <div class="th">Ipsum</div>
            <div class="th">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 1</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 2</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 3</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 4</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 5</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
        <div class="tr">
            <div class="td fixed">Fixed 6</div>
            <div class="td">Lorem</div>
            <div class="td">Ipsum</div>
            <div class="td">Sator</div>
        </div>
    </div>
</div>
</div>

Looks really messed up in Chrome – J. Titus May 05 '16 at 12:12 — J. Titus, May 05 '16 at 12:12

score 0 · Answer 4 · answered May 05 '16 at 12:17

0

Removing position: absolute from the .fixed css definition aligned the cells correctly for me, but you will have to play with the wrapper to get the table to correct width.

Absolute positioning is good for some things, but rarely good for creating tables.

answered May 05 '16 at 12:17

TheEllis

1,666
11
18

The absolute positioning is the key to the whole thing, but let me try and find another approach. Already tried floating, not much left to try – Germstorm May 05 '16 at 12:22

How to correct strange margin error in fixed-column of HTML table?

4 Answers4