Sticky position kills scrollbars in chrome 77 (osx) - html

In the example below I have two tables except the first one has a sticky header which I achieve with
position: sticky;
top: 0px;
https://codepen.io/seunje/pen/JjjRVLm
The sticky-ness works very well but the scrollbars disappear!
This works fine in Firefox.
Does anyone know a work-around in Chrome?
.container {
height: 50px;
overflow: auto;
}
.table {
display: table;
width: 100%;
}
.tr.sticky-header {
position: sticky;
top: 0px;
}
.td.sticky-header {
position: sticky;
top: 0px;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
}
<div class="container">
<div class="table">
<div class="tr sticky-header">
<div class="td sticky-header">H1</div>
<div class="td sticky-header">H2</div>
<div class="td sticky-header">H3</div>
<div class="td sticky-header">H4</div>
<div class="td sticky-header">H5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
</div>
</div>
<div class="container">
<div class="table">
<div class="tr header">
<div class="td header">H1</div>
<div class="td header">H2</div>
<div class="td header">H3</div>
<div class="td header">H4</div>
<div class="td header">H5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
<div class="td">4</div>
<div class="td">5</div>
</div>
</div>
</div>


You could apply a background to the header and give to it a higher z-index, this way you'll have the header always in evidence

Related

How can I select all elements except those inside divs with particular classes

I'd like to find a way to select all the makes of cars except those that are inside a div with the class discontinued or scrapped. Here's my markup:
div:not(.discontinued):not(.scrapped) > .make {
color: green;
}
<div class="car">
<div class="make">NISSAN</div>
<div class="model">MICRA</div>
</div>
<div class="discontinued">
<div class="car">
<div class="make">FORD</div>
<div class="model">MONDEO</div>
</div>
</div>
<div class="scrapped">
<div class="car">
<div class="make">SEAT</div>
<div class="model">IBIZA</div>
</div>
</div>
<div class="scrapped">
<div class="preowned">
<div class="car">
<div class="make">BMW</div>
<div class="model">100</div>
</div>
</div>
</div>
<div class="car">
<div class="make">HONDA</div>
<div class="model">INTEGRA</div>
</div>
</div>
<div class="car">
<div class="make">PEUGEOT</div>
<div class="model">206</div>
</div>
<div class="car">
<div class="make">TOYOTA</div>
<div class="model">COROLLA</div>
</div>
As you can see above, I tried the following:
div:not(.discontinued):not(.scrapped) > .make
...but this still included FORD, SEAT, and BMW.

Unfortunately CSS selectors cannot traverse up parent elements, so if you are just trying to style them differently you may want to reverse your thought process and select ones that are .discontinued or .scrapped and apply overriding styles:
.model {
padding-left: 10px;
}
.make {
color: green;
}
.scrapped .make,
.discontinued .make {
color: red;
}
<div class="car">
<div class="make">NISSAN</div>
<div class="model">MICRA</div>
</div>
<div class="discontinued">
<div class="car">
<div class="make">FORD</div>
<div class="model">MONDEO</div>
</div>
</div>
<div class="scrapped">
<div class="car">
<div class="make">SEAT</div>
<div class="model">IBIZA</div>
</div>
</div>
<div class="scrapped">
<div class="preowned">
<div class="car">
<div class="make">SEAT</div>
<div class="model">IBIZA</div>
</div>
</div>
</div>
<div class="car">
<div class="make">HONDA</div>
<div class="model">INTEGRA</div>
</div>
<div class="car">
<div class="make">PEUGEOT</div>
<div class="model">206</div>
</div>
<div class="car">
<div class="make">TOYOTA</div>
<div class="model">COROLLA</div>
</div>

Why don't you try this style code,
div.make:not(.discontinued .make):not(.scrapped .make) {
color: green;
}

Why does Chrome draw two lines where Firefox displays one?

I am trying to make a grid of responsive squares, which would look similar to a squared paper. I used a pre-prepared solution, which I tried to adopt to my purpose. My HTML code looks like this (example grid of 4*4 squares):
.square {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
margin: 0%;
overflow: hidden;
}
.content {
position: absolute;
height: 100%;
width: 100%;
padding: 0%;
}
.table {
display: table;
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
border: thin solid black;
}
<div id="grid">
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
</div>
The grid is OK in Firefox. But when I look at it in Chrome, it displays two lines between second and third row (and between second and third column) instead of one. I tried to set .square background-color to black. It worked partially, but the line in question looks thicker than the others. Is there a batter solution?

There is no proper solution for this. Seems like Chrome rounds off widths on display: table but not on display: block. Slight change of markup produces consistent result:
.square {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
margin: 0%;
overflow: hidden;
}
.content {
position: absolute;
height: 100%;
width: 100%;
padding: 0%;
}
.table {
/* removed display table */
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
}
.table-cell {
/* removed display table-cell */
vertical-align: middle;
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
border: thin solid black;
/* added */
box-sizing: border-box;
}
<div id="grid">
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
</div>

I guess your problem ist, that you have display:table and thus have double-borders inside yuor table. You can fix that with border-collapse:collapse inside your .table class.
Here's a working fiddle, no more thik lines, noe double borders in chrome: https://jsfiddle.net/Hoargarth/kh7fyegk/
Edit: I forgot to mention, that i also changed border: thin solid black; to border: 1px solid black; inside the fiddle, to remove the thick lines in chrome.

add border-collapse: collapse; in table class
.square {
float:left;
position: relative;
width: 25%;
padding-bottom : 25%;
margin:0%;
overflow:hidden;
}
.content {
position:absolute;
height:100%;
width:100%;
padding: 0%;
}
.table{
display:table;
height:100%;
width:100%;
padding: 0%;
margin: 0%;
border-collapse: collapse;
}
.table-cell{
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
padding: 0%;
margin: 0%;
border: thin solid black;
}
<div id="grid">
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell"></div>
</div>
</div>
</div>
</div>

If you remove the position: relative from the .square and add the height to .content does it solve your problem ?

Table structure without table tags, only divs

I have a table structure with only divs and float left. I want it to be responsive (I know I have to add media queries). There is something wrong in my code. For now I want to reduce the window it changes to horizontal scroll which I tried and it doesn't work.
Here is my code:
<div style="">
<div style="border: 2px solid green;height:100px;width:100%;">
<div style="width:6rem;background:aqua;top: 4.2rem;position:absolute;">FM</div>
<div style="width:6rem;float:left;background:aqua;position: relative;top:2.4rem;">TNT</div>
<div style="text-align:center;float:left;border:1px solid;">
<div style="background:red;">Alarmes</div>
<div style="width:100%;">
<div style="float: left;width:6rem;background:pink;">Criticité</div>
<div style="float: left;width:6rem;background:pink;">Sans Sup</div>
<div style="float: left;width:6rem;background:pink;">Non nominale</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">(chart)</div>
<div style="float: left;width:6rem;background:gold;">2</div>
<div style="float: left;width:6rem;background:gold;">5</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">(chart)</div>
<div style="float: left;width:6rem;background:gold;">10</div>
<div style="float: left;width:6rem;background:gold;">1</div>
</div>
</div>
<div style="text-align:center;float:left;border:1px solid;">
<div style="background:red;">TICKETS</div>
<div>
<div style="float: left;width:6rem;background:pink;">Non nominale</div>
<div style="float: left;width:6rem;background:pink;">A suivre</div>
<div style="float: left;width:6rem;background:pink;">Clôs</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">5</div>
<div style="float: left;width:6rem;background:gold;">-</div>
<div style="float: left;width:6rem;background:gold;">2</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">9</div>
<div style="float: left;width:6rem;background:gold;">-</div>
<div style="float: left;width:6rem;background:gold;">0</div>
</div>
</div>
<div style="text-align:center;float:left;border:1px solid;">
<div style="background:red;">SITES</div>
<div>
<div style="float: left;width:6rem;background:pink;">Perte HF</div>
<div style="float: left;width:6rem;background:pink;">-3DB</div>
<div style="float: left;width:6rem;background:pink;">Décro HS</div>
<div style="float: left;width:6rem;background:pink;">Alarme RX</div>
<div style="float: left;width:6rem;background:pink;">Alarme RX</div>
<div style="float: left;width:6rem;background:pink;">GE</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">-</div>
<div style="float: left;width:6rem;background:gold;">8</div>
<div style="float: left;width:6rem;background:gold;">3</div>
<div style="float: left;width:6rem;background:gold;">7</div>
<div style="float: left;width:6rem;background:gold;">1</div>
<div style="float: left;width:6rem;background:gold;">6</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">-</div>
<div style="float: left;width:6rem;background:gold;">5</div>
<div style="float: left;width:6rem;background:gold;">4</div>
<div style="float: left;width:6rem;background:gold;">8</div>
<div style="float: left;width:6rem;background:gold;">0</div>
<div style="float: left;width:6rem;background:gold;">2</div>
</div>
</div>
</div>
</div>

Step 1. Remove all the styles from the divs
Step 2 use inline-block instead of float.
Step 3 make each table-row enclosed in its own div with display: block except the ones you want alongside each other, which should be inline-block
Step 4 add a width to the parent div and overflow-x: auto;
Step 5 add a non-wrapping parent div around the two sections you want side-by-side, and put each of those in its own div
(if you want to only have the scrolling on the sites section, put that inside the div with class container)
HTML
<div class="container">
<div class="no-wrap">
<div class="side-by-side">
<div class="row">
<div> </div>
</div>
<div class="row">
<div> </div>
</div>
<div class="row">
<div class="aqua">FM</div>
</div>
<div class="row">
<div class="aqua">TNT</div>
</div>
</div><!--/side-by-side-->
<div class="side-by-side">
<div class="row">
<div class="red">Alarmes</div>
</div>
<div class="row">
<div class="pink">Criticité</div>
<div class="pink">Sans Sup</div>
<div class="pink">Non nominale</div>
</div>
<div class="row">
<div class="gold">(chart)</div>
<div class="gold">2</div>
<div class="gold">5</div>
</div>
<div class="row">
<div class="gold">(chart)</div>
<div class="gold">10</div>
<div class="gold">1</div>
</div>
</div>
<div class="side-by-side">
<div class="row">
<div class="red">TICKETS</div>
</div>
<div class="row">
<div class="pink">Non nominale</div>
<div class="pink">A suivre</div>
<div class="pink">Clôs</div>
</div>
<div class="row">
<div class="gold">5</div>
<div class="gold">-</div>
<div class="gold">2</div>
</div>
<div class="row">
<div class="gold">9</div>
<div class="gold">-</div>
<div class="gold">0</div>
</div>
</div>
<div class="side-by-side">
<div class="row">
<div class="double-red">SITES</div>
</div>
<div class="no-wrap">
<div class="side-by-side">
<div class="row">
<div class="pink">Perte HF</div>
<div class="pink">-3DB</div>
<div class="pink">Décro HS</div>
</div>
<div class="row">
<div class="gold">-</div>
<div class="gold">8</div>
<div class="gold">3</div>
</div>
<div class="row">
<div class="gold">-</div>
<div class="gold">5</div>
<div class="gold">4</div>
</div>
</div>
<div class="side-by-side">
<div class="row">
<div class="pink">Alarme RX</div>
<div class="pink">Alarme RX</div>
<div class="pink">GE</div>
</div>
<div class="row">
<div class="gold">7</div>
<div class="gold">1</div>
<div class="gold">6</div>
</div>
<div class="row">
<div class="gold">8</div>
<div class="gold">0</div>
<div class="gold">2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--/container-->
CSS
.pink {
display: inline-block;
width:6rem;
background:pink;
}
.gold {
display: inline-block;
width:6rem;
background:gold;
}
.aqua {
width:6rem;
display: inline-block;
background:aqua;
}
.red {
background-color: red;
color: #fff;
width: 18.5rem;
}
.double-red {
background-color: red;
color: #fff;
width: 37.25rem;
}
.container {
width: 18.5rem;
overflow: auto;
}
.row {
display: block;
}
.side-by-side {
display: inline-block;
}
.no-wrap {
width: 37.25rem;
white-space: nowrap;
}
CodePen here: https://codepen.io/vogelbeere/pen/awxQMW

How to create table without breaking row? (Bootstrap)

I have this bootstrap snippet:
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
<div class="col-xs-12">Project Name</div>
</div>
<div class="col-xs-9">
<div class="col-xs-1">Jan</div>
<div class="col-xs-1">Feb</div>
<div class="col-xs-1">Mar</div>
<div class="col-xs-1">Apr</div>
<div class="col-xs-1">May</div>
<div class="col-xs-1">Jun</div>
<div class="col-xs-1">Jul</div>
<div class="col-xs-1">Aug</div>
<div class="col-xs-1">Sep</div>
<div class="col-xs-1">Okt</div>
<div class="col-xs-1">Nov</div>
<div class="col-xs-1">Dec</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="col-xs-12">Project #1</div>
</div>
<div class="col-xs-9">
<div class="col-xs-1">10</div>
<div class="col-xs-1">20</div>
<div class="col-xs-1">30</div>
<div class="col-xs-1">40</div>
<div class="col-xs-1">50</div>
<div class="col-xs-1">60</div>
<div class="col-xs-1">70</div>
<div class="col-xs-1">80</div>
<div class="col-xs-1">90</div>
<div class="col-xs-1">100</div>
<div class="col-xs-1">110</div>
<div class="col-xs-1">120</div>
</div>
</div>
</div>
it creates this table:
Everything looks good on the Desktop, but when I watch it on mobile or tablet it breaks:
Is it possible to create it without breaking? (version with tables does not fit)

Try setting a min-width on the container like this:
.container {
min-width: 630px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 container">
<div class="row">
<div class="col-xs-3">
<div class="col-xs-12">Project Name</div>
</div>
<div class="col-xs-9">
<div class="col-xs-1">Jan</div>
<div class="col-xs-1">Feb</div>
<div class="col-xs-1">Mar</div>
<div class="col-xs-1">Apr</div>
<div class="col-xs-1">May</div>
<div class="col-xs-1">Jun</div>
<div class="col-xs-1">Jul</div>
<div class="col-xs-1">Aug</div>
<div class="col-xs-1">Sep</div>
<div class="col-xs-1">Okt</div>
<div class="col-xs-1">Nov</div>
<div class="col-xs-1">Dec</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="col-xs-12">Project #1</div>
</div>
<div class="col-xs-9">
<div class="col-xs-1">10</div>
<div class="col-xs-1">20</div>
<div class="col-xs-1">30</div>
<div class="col-xs-1">40</div>
<div class="col-xs-1">50</div>
<div class="col-xs-1">60</div>
<div class="col-xs-1">70</div>
<div class="col-xs-1">80</div>
<div class="col-xs-1">90</div>
<div class="col-xs-1">100</div>
<div class="col-xs-1">110</div>
<div class="col-xs-1">120</div>
</div>
</div>
</div>

This approach can work for narrow viewports:
[class^="col-"] {
font-size: 2.5vw;
padding: 0;
}
You can wrap it into #media for x-small screens only.

You can set the elements wrapping the breaking divs to display: flex, which will by default display them in one row instead of breaking:
.flex {
display: flex;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 container">
<div class="row">
<div class="col-xs-3 flex">
<div class="col-xs-12">Project Name</div>
</div>
<div class="col-xs-9 flex">
<div class="col-xs-1">Jan</div>
<div class="col-xs-1">Feb</div>
<div class="col-xs-1">Mar</div>
<div class="col-xs-1">Apr</div>
<div class="col-xs-1">May</div>
<div class="col-xs-1">Jun</div>
<div class="col-xs-1">Jul</div>
<div class="col-xs-1">Aug</div>
<div class="col-xs-1">Sep</div>
<div class="col-xs-1">Okt</div>
<div class="col-xs-1">Nov</div>
<div class="col-xs-1">Dec</div>
</div>
</div>
<div class="row">
<div class="col-xs-3 flex">
<div class="col-xs-12">Project #1</div>
</div>
<div class="col-xs-9 flex">
<div class="col-xs-1">10</div>
<div class="col-xs-1">20</div>
<div class="col-xs-1">30</div>
<div class="col-xs-1">40</div>
<div class="col-xs-1">50</div>
<div class="col-xs-1">60</div>
<div class="col-xs-1">70</div>
<div class="col-xs-1">80</div>
<div class="col-xs-1">90</div>
<div class="col-xs-1">100</div>
<div class="col-xs-1">110</div>
<div class="col-xs-1">120</div>
</div>
</div>
</div>

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

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>

Add this to your CSS:
.th.fixed {
top: 0;
}
Updated Fiddle
(Working in Chrome - doesn't look right in FireFox)

I have added margin-top for fixed td and it worked
http://jsfiddle.net/g77nLu5w/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>

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.