Why does Chrome draw two lines where Firefox displays one? - html

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 ?

Related

How to put all the div squares on the same line?

I am trying to lay down all these square divs horizontally but when I set display:inline-block on the parent div, everything shrinks down and collapses into a pellet. If I use flex, I feel like I need to tweak flex property to my need. Is there a simple way to fix it?(I want them to always occupy two lines evenly with the gap in between in response to the changing viewport width)
.square {
position: relative;
margin: 0;
max-width: 60px;
border: 1px dotted black;
border-radius: 4px;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.square .content {
position: absolute;
width: 100%;
height: 100%;
}
<div class="number-of-round">
<div class="square">
<div class="content flex flex-center">1</div>
</div>
<div class="square">
<div class="content flex flex-center">2</div>
</div>
<div class="square">
<div class="content flex flex-center">3</div>
</div>
<div class="square">
<div class="content flex flex-center">4</div>
</div>
<div class="square">
<div class="content flex flex-center">5</div>
</div>
<div class="square">
<div class="content flex flex-center">6</div>
</div>
<div class="square">
<div class="content flex flex-center">7</div>
</div>
<div class="square">
<div class="content flex flex-center">8</div>
</div>
<div class="square">
<div class="content flex flex-center">9</div>
</div>
<div class="square">
<div class="content flex flex-center">10</div>
</div>
<div class="square">
<div class="content flex flex-center">11</div>
</div>
<div class="square">
<div class="content flex flex-center">12</div>
</div>
</div>

You need to set a width not max-width when using inline-block. Unlike block elements, inline-block doesn't take the full parent width so max-width will have no effect
.square {
display: inline-block;
position: relative;
margin: 0;
width: 60px;
border: 1px dotted black;
border-radius: 4px;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.square .content {
position: absolute;
width: 100%;
height: 100%;
}
<div class="number-of-round">
<div class="square">
<div class="content flex flex-center">1</div>
</div>
<div class="square">
<div class="content flex flex-center">2</div>
</div>
<div class="square">
<div class="content flex flex-center">3</div>
</div>
<div class="square">
<div class="content flex flex-center">4</div>
</div>
<div class="square">
<div class="content flex flex-center">5</div>
</div>
<div class="square">
<div class="content flex flex-center">6</div>
</div>
<div class="square">
<div class="content flex flex-center">7</div>
</div>
<div class="square">
<div class="content flex flex-center">8</div>
</div>
<div class="square">
<div class="content flex flex-center">9</div>
</div>
<div class="square">
<div class="content flex flex-center">10</div>
</div>
<div class="square">
<div class="content flex flex-center">11</div>
</div>
<div class="square">
<div class="content flex flex-center">12</div>
</div>
</div>

.square {
width:10vw;
max-width:60px;aspect-ratio:1;
margin-bottom:3vw;
border: 1px dotted black;
border-radius: 4px;
}
.number-of-round{
display:flex;
justify-content: space-between;}
<div class="number-of-round">
<div class="square">
<div class="content flex flex-center">1</div>
</div>
<div class="square">
<div class="content flex flex-center">2</div>
</div>
<div class="square">
<div class="content flex flex-center">3</div>
</div>
<div class="square">
<div class="content flex flex-center">4</div>
</div>
<div class="square">
<div class="content flex flex-center">5</div>
</div>
<div class="square">
<div class="content flex flex-center">6</div>
</div>
</div>
<div class="number-of-round">
<div class="square">
<div class="content flex flex-center">7</div>
</div>
<div class="square">
<div class="content flex flex-center">8</div>
</div>
<div class="square">
<div class="content flex flex-center">9</div>
</div>
<div class="square">
<div class="content flex flex-center">10</div>
</div>
<div class="square">
<div class="content flex flex-center">11</div>
</div>
<div class="square">
<div class="content flex flex-center">12</div>
</div>
</div>

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;
}

Sticky position kills scrollbars in chrome 77 (osx)

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

How do I set div like table with different width?

I have div to look like table, this is my code:
.cell {
border: 1px solid red;
display: table-cell
}
.tableLike {
padding-bottom: 30px;
display: table
}
.rowLike {
display: table-row
}
.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
width: 15%;
}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>
Now all the the columns are in different width, and I don't know why. I want that div get different width but synchronize.

using display:table like this
.tableLike{width:100%;display:table;}
.cell{border:1px solid red;display:table-cell;}
.tableLike {display:table;}
.rowLike{display:table-row;}
.cell{border:1px solid red;display:table-cell;}
.tableLike{padding-bottom: 30px;}
.rowLike .cell:nth-child(1),.rowLike .cell:nth-child(3){ width: 15%;}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>

Add the correct display styles:
.cell {
border: 1px solid red;
display: table-cell;
}
.tableLike {
padding-bottom: 30px;
display: table;
}
.rowLike {
display: table-row;
}
.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
width: 15%;
}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>

.tableLike {display:table;}
.rowLike{display:table-row;}
.cell{border:1px solid red;display:table-cell;}
.tableLike{padding-bottom: 30px;}
.rowLike .cell:nth-child(1),.rowLike .cell:nth-child(3){ width: 33%;}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>

I will do like this.
You can try, but it may not be the best answer.
.cell {
border-right:1px solid red;
border-bottom:1px solid red;
display: table-cell
}
.tableLike {
padding-bottom: 30px;
display: table
}
.rowLike {
display: table-row
}
.rowLike .cell:nth-child(1),
.rowLike .cell:nth-child(3) {
width: 15%;
}
.rowLike:nth-child(1) .cell:nth-child(1),
.rowLike:nth-child(1) .cell:nth-child(2),
.rowLike:nth-child(1) .cell:nth-child(3){
border-top:1px solid red;
}
.rowLike:nth-child(1) .cell:nth-child(1),
.icon-close{
border-left:1px solid red;
}
<div class="tableLike ">
<div class="rowLike">
<div class="cell"></div>
<div class="cell">
<div class="title">PRODUCT</div>
</div>
<div class="cell">
<div class="title">PRICE</div>
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content
</div>
<div class="cell bolder">
$30
</div>
</div>
<div class="rowLike">
<div class="cell">
<i class="icon-close">X</i>
</div>
<div class="cell">
some content some content
</div>
<div class="cell bolder">
$8
</div>
</div>
</div>

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