Make a grid responsive to its parent width - html

I have an HTML structure like this:
<div class="row">
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
</div>
where class 'row' has width: 100% of its parent and the parent width will change over time.
My goal is that the two divs with a "half-row" class must be in-line and occupy 50% of the "row" div. If the size of the "row" div goes below 640px (so the half-row will be < 320px) the two half-row class divs have to stack and each of them occupies 100% of the available space.
In both cases, the internal div ("cell" class) must equally divide the available space.
Every suggestion is welcome. Thank you


#S.C. is right, flexbox is the way to go and I would also recommend reading the CSS-tricks article! In fact I have used this very same article to construct this alternative example, that's independent of the screen-width:
.row, .half-row {
display: flex;
}
.row {
width: 100%;
flex-direction: row;
flex-wrap: wrap;
}
.half-row {
width: 320px;
flex-grow: 1;
justify-content: space-around;
/* for seeing better what's going on */
background-color: #aaa;
border: 1px solid #333;
}
<div class="row">
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
</div>


You can use flexbox for that.
See excellent article from Css-tricks about Flexbox
If you want to tell us more about the cell class who need to divide the available space "equally" (Horizontally ? Vertically ? both ? Squared ? etc.) I'll update my code to fit with your needs.
I Hope this could help you.
.row {
display: flex;
width: 100%;
flex-flow: row wrap;
}
.half-row {
display: flex;
flex-flow: row; /* or column */
flex-basis: 100%;
/* remove after tests */
background-color: red;
height: 500px;
}
.cell {
flex-basis: 100%;
/* remove after tests */
background-color: blue;
}
#media screen and (min-width: 640px) {
.half-row { flex-basis: 50%; }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="row">
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
</div>
</body>
</html>

Related

HTML/CSS Div Table (3x2) - Change Text align to top [duplicate]

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
i got following problem:
I want the text to be displayed in a table of 3x2, which it does.
But the text in my second and third column is aligned to the bottom, because they are smaller than the text in my first column.
How do i set all of the texts to start at the top?
.row {
margin: 0% 15% 0% 15%;
}
.col {
width: 30%;
display: inline-block;
}
<html>
<body>
<div class="tab">
<div class="row">
<div class="col">
<p>Title</p>
</div>
<div class="col">
<p>Title</p>
</div>
<div class="col">
<p>Title</p>
</div>
</div>
<div class="row">
<div class="col">
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
</div>
<div class="col">
<p>12321312312312</p>
<p>12321312312312</p>
</div>
<div class="col">
<p>12321312312312</p>
</div>
</div>
</div>
</body>
</html>

Use vertical-align: top; Like this:
.row {
margin: 0% 15% 0% 15%;
}
.col {
width: 30%;
display: inline-block;
vertical-align: top;
}
<html>
<body>
<div class="tab">
<div class="row">
<div class="col">
<p>Title</p>
</div>
<div class="col">
<p>Title</p>
</div>
<div class="col">
<p>Title</p>
</div>
</div>
<div class="row">
<div class="col">
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
</div>
<div class="col">
<p>12321312312312</p>
<p>12321312312312</p>
</div>
<div class="col">
<p>12321312312312</p>
</div>
</div>
</div>
</body>
</html>

Add vertical-align to top in .col.
.col {
width: 30%;
display: inline-block;
vertical-align: top;
}

Easiest way would be the sue of the right tool for such task: CSS-Grid.
body {
margin: 0;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
<div>
<p>Title</p>
</div>
<div>
<p>Title</p>
</div>
<div>
<p>Title</p>
</div>
<div>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
</div>
<div>
<p>12321312312312</p>
<p>12321312312312</p>
</div>
<div>
<p>12321312312312</p>
</div>

Heres a simple and slight redesign, using grid, no vertical align needed
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<div class="row">
title
<div class="column">
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
</div>
</div>
<div class="row">
title
<div class="column">
<p>12321312312312</p>
<p>12321312312312</p>
</div>
</div>
<div class="row">
title
<div class="column">
<p>12321312312312</p>
</div>
</div>
</div>
</body>
</html>
CSS
.table {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Demo: https://codepen.io/anthony_718/pen/JjRRpoM

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>

CSS Grid row max height 1fr, scroll content

I have a 'calendar' layout using the following css-grid styles:
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 1.5em 1.5em repeat(6, 1fr);
width: 100%;
height: 100%;
}
(Codepen https://codepen.io/joelhoward0/pen/vJLmWK)
The first two rows are a 'controls' header and days of the week headers, followed by divs for each day in the month:
<div class="day">
<div class="header">26</div>
<div class="content"></div>
</div>
Each day has a .header and .content div. I want the .header div to take up 1/5 of the height of the row, and the content to take up 4/5 and scroll if the content overflows.
However, any combination of styles I've tried just leads to .content growing, shrinking the other grid rows to compensate. I assume this is due to the use of 1fr on the container grid-template-rows.
Is it possible to achieve a max height of 4/5 of the grid row height, which is 1/6 of the vertical space available, on the .content div?
(Note: setting overflow-y: auto; on .day achieves what I want, but the header is included in the scrolling area. Setting overflow-y: auto; on .content doesn't seem to do anything.)

Although #MichaelB's response is technically correct, I have found that you can actually do it without resorting to specifying heights manually. And it's dead simple to do it too.
In addition to adding overflow:auto to the grid-item you want scrollbars on, you also need to add an overflow:auto to the parent of that grid-item.
https://codepen.io/kumarharsh/pen/jejGMm?editors=1100
html,
body {
height: 100%;
}
body {
position: relative;
margin: 0;
}
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 1.5em 1.5em repeat(6, 1fr);
width: 100%;
height: 100%;
box-sizing: border-box;
border: solid grey;
border-width: 1px 0 0 1px;
position: relative;
}
.dayHeader {
border: solid grey;
border-width: 0 1px 1px 0;
}
.day {
border: solid grey;
border-width: 0 1px 1px 0;
overflow: auto; /* added overflow here! */
}
.content {
overflow-y: auto;
}
.controls {
grid-column-start: 1;
grid-column-end: 8;
border: solid grey;
border-width: 0 1px 1px 0;
}
<div class="calendar">
<div class="controls">July 2017</div>
<div class="dayHeader">Sunday</div>
<div class="dayHeader">Monday</div>
<div class="dayHeader">Tuesday</div>
<div class="dayHeader">Wednesday</div>
<div class="dayHeader">Thursday</div>
<div class="dayHeader">Friday</div>
<div class="dayHeader">Saturday</div>
<div class="day">
<div class="header">25</div>
<div class="content">
this is a lot of content that I want to have scroll instead of just stretching the grid row and forcing the other rows to be smaller to compensate for this one's increased size due
</div>
</div>
<div class="day">
<div class="header">26</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">27</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">28</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">29</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">30</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">1</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">2</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">3</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">4</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">5</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">6</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">7</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">8</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">9</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">10</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">11</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">12</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">13</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">14</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">15</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">16</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">17</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">18</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">19</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">20</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">21</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">22</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">23</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">24</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">25</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">26</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">27</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">28</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">29</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">30</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">31</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">1</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">2</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">3</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">4</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">5</div>
<div class="content"></div>
</div>
</div>
Best of all, It works in all browsers (tested in Firefox, Chrome, and Edge), so it's likely not a hack, but an intended behaviour.
Why does this happen?
I can't find a clear answer in the spec yet, but I'll keep looking and update here when I have something concrete.
Update
Do read #Victoria's followup comment: CSS Grid row max height 1fr, scroll content which has another way to do it - I'd recommend you use that way if your design allows it.

Each row in the grid (except for the headers) is set to 1fr height. That means each row will consume an equal proportion of free space in the container.
Just note that fr sizing doesn't actually define a length – either width or height. With fr you are simply distributing free space.
But for the overflow property to work, an actual height must be defined:
In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.
source: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Therefore, consider using actual heights as opposed to space distribution. Here's an example:
html,
body {
height: 100%;
}
body {
position: relative;
margin: 0;
}
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 1.5em 1.5em repeat(6, 175px); /* adjusment */
width: 100%;
height: 100%;
box-sizing: border-box;
border: solid grey;
border-width: 1px 0 0 1px;
position: relative;
}
.dayHeader {
border: solid grey;
border-width: 0 1px 1px 0;
}
.day {
height: 175px; /* new */
border: solid grey;
border-width: 0 1px 1px 0;
}
.header { /* new */
height: 20%;
background-color: yellow;
}
.content {
height: 80%; /* new */
overflow-y: auto;
background-color: aqua;
}
.controls {
grid-column-start: 1;
grid-column-end: 8;
border: solid grey;
border-width: 0 1px 1px 0;
}
<div class="calendar">
<div class="controls">July 2017</div>
<div class="dayHeader">Sunday</div>
<div class="dayHeader">Monday</div>
<div class="dayHeader">Tuesday</div>
<div class="dayHeader">Wednesday</div>
<div class="dayHeader">Thursday</div>
<div class="dayHeader">Friday</div>
<div class="dayHeader">Saturday</div>
<div class="day">
<div class="header">25</div>
<div class="content">
this is a lot of content that I want to have scroll instead of just stretching the grid row and forcing the other rows to be smaller to compensate for this one's increased size due
</div>
</div>
<div class="day">
<div class="header">26</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">27</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">28</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">29</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">30</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">1</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">2</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">3</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">4</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">5</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">6</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">7</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">8</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">9</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">10</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">11</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">12</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">13</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">14</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">15</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">16</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">17</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">18</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">19</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">20</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">21</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">22</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">23</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">24</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">25</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">26</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">27</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">28</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">29</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">30</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">31</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">1</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">2</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">3</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">4</div>
<div class="content"></div>
</div>
<div class="day">
<div class="header">5</div>
<div class="content"></div>
</div>
</div>
revised demo

It looks like if you set the header to position: fixed, set calc(100%/7) and give it a non-transparent background. Set .day to overflow-y:auto and give your .content a margin-top that seems to work as well as keeping the calender fluid to the browser height.
If it's important for the header to be the full width of the day block with borders you can add your current border properties to only the right side and add box-sizing: border-box
.header{
position:fixed;
background: white;
width: calc(100%/7);
border: solid grey;
border-width: 0 1px 0 0;
box-sizing: border-box;
}
.day {
border: solid grey;
border-width: 0 1px 1px 0;
overflow-y: auto;
}
.content {
margin-top: 20px;
}
Demo

How to make align text to top in css table cell

I have the the html table like here
.table {
margin: 0 0 40px 0;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
display: table;
}
#media screen and (max-width: 580px) {
.table {
display: block;
}
}
.row {
display: table-row;
background: #f6f6f6;
}
.row:nth-of-type(odd) {
background: #e9e9e9;
}
.row.header {
font-weight: 900;
color: #ffffff;
background: #ea6153;
}
.row.green {
background: #27ae60;
}
.row.blue {
background: #2980b9;
}
#media screen and (max-width: 580px) {
.row {
padding: 8px 0;
display: block;
}
}
.cell {
padding: 6px 6px;
display: table-cell;
line-height: 1.2em;
}
#media screen and (max-width: 580px) {
.cell {
padding: 2px 12px;
display: block;
}
}
<div class="table">
<div class="row header green">
<div class="cell">
</div>
<div class="cell">
Name
</div>
<div class="cell">
Id
</div>
<div class="cell">
Author
</div>
<div class="cell">
Price
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.googleusercontent.com/P0aVrLO7Wxob0dIBx80m85wUyHFiK3-Xw7Xw_6CDFAogdeoRR0YWnSjkFNOR4M7nIA=w340" width="50" height="50">
</div>
<div class="cell">
<h1>Flightradar24 - Flight Tracker</h1>
<span>com.flightradar24pro</span>
</div>
<div class="cell">
com.flightradar24pro
</div>
<div class="cell">
Flightradar24 AB
</div>
<div class="cell">
$3.99
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.googleusercontent.com/JXJb3299C15MfJGA0wWoNCq-qNdNOuTXLuvd8mg0Wa3VRTPIDlPMfmUZK-Sn8WLiPz0=w340" width="50" height="50">
</div>
<div class="cell">
<h1>WatchMaker Premium Watch Face</h1>
<span>slide.watchFrenzy.premium</span>
</div>
<div class="cell">
slide.watchFrenzy.premium
</div>
<div class="cell">
androidslide
</div>
<div class="cell">
$3.99
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.ggpht.com/a125TbrsUMdstTX1UQDPlrIQkFphGp9SQpT30sE8vsEkBj33YulEgaeN8rmmgL5ngk0=w340" width="50" height="50">
</div>
<div class="cell">
<h1>Ski Tracks</h1>
<span>com.corecoders.skitracks</span>
</div>
<div class="cell">
com.corecoders.skitracks
</div>
<div class="cell">
Core Coders Ltd
</div>
<div class="cell">
$0.99
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.googleusercontent.com/WcL0Crw46EJubniXfwCZbVgO7JF9ToVjVjPwlqCqZOhLWtrp8mGjaoh865ZXdhiG1A=w340" width="50" height="50">
</div>
<div class="cell">
<h1>Weather Timeline - Forecast</h1>
<span>com.samruston.weather</span>
</div>
<div class="cell">
com.samruston.weather
</div>
<div class="cell">
Sam Ruston
</div>
<div class="cell">
$1.49
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.googleusercontent.com/dsQKC-6sq0rJZX3I1N5ivpU3fS8s-mokRlZnV8gDI9tIdt523j2df8AwwMHVGkvG76Q=w340" width="50" height="50">
</div>
<div class="cell">
<h1>Unified Remote Full</h1>
<span>com.Relmtech.RemotePaid</span>
</div>
<div class="cell">
com.Relmtech.RemotePaid
</div>
<div class="cell">
Unified Intents
</div>
<div class="cell">
$0.99
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh5.ggpht.com/YmbOfBlKGDy7K39ngf5m0vrXG8gK-gCORC1ybbtMVJa63MX1SPjtxi4jMQmRrcazgw=w340" width="50" height="50">
</div>
<div class="cell">
<h1>NOAA Weather Unofficial (Pro)</h1>
<span>com.nstudio.weatherhere</span>
</div>
<div class="cell">
com.nstudio.weatherhere
</div>
<div class="cell">
Granite Apps
</div>
<div class="cell">
$1.99
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.googleusercontent.com/HB1NQpjlT21nGLFXCc5lLHXqtft9CHNq8nLW16DDJF_d61_9CVYbEuRfrYGfIXI8V2Y=w340" width="50" height="50">
</div>
<div class="cell">
<h1>Password Manager SafeInCloud™</h1>
<span>com.safeincloud</span>
</div>
<div class="cell">
com.safeincloud
</div>
<div class="cell">
SafeInCloud
</div>
<div class="cell">
$2.99
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.googleusercontent.com/twhd0ckGPSETQH7TDkiYvrJr-FKQ-YP1Bll1_-Dk-1Bx4YdJJ1HwinVhHk6uy_YYEe8=w340" width="50" height="50">
</div>
<div class="cell">
<h1>Talon for Twitter</h1>
<span>com.klinker.android.twitter_l</span>
</div>
<div class="cell">
com.klinker.android.twitter_l
</div>
<div class="cell">
Luke Klinker
</div>
<div class="cell">
$1.49
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.googleusercontent.com/UgItAs4ckdGHTXTVWNQ0NNrWy9rh6ya4BrjwAUPMsgMpwOI2NQ7N0zvfQ8eyb78NzHE=w340" width="50" height="50">
</div>
<div class="cell">
<h1>Watch Face - Minimal & Elegant</h1>
<span>com.stmp.minimalface</span>
</div>
<div class="cell">
com.stmp.minimalface
</div>
<div class="cell">
Studio eXtreme
</div>
<div class="cell">
$1.59
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.googleusercontent.com/OZQhEH8B9PNGPkOlx714tIK0mEjMBHUEoJdb2bqUY01i9SKh8iI66j9RMRRzYCvKpYc=w340" width="50" height="50">
</div>
<div class="cell">
<h1>Weather Live</h1>
<span>com.apalon.weatherlive</span>
</div>
<div class="cell">
com.apalon.weatherlive
</div>
<div class="cell">
Apalon Apps
</div>
<div class="cell">
$0.99
</div>
</div>
</div>
And then detail css like here :
The problem i got was when I combine the cell with the image the result table would like this picture :
So how to make the text to align in top? so the red area would be clear. Thanks
The js fiddle detail you can see this link
html table jsfiddle

use vertical-align:top
.cell {
padding: 6px 6px;
display: table-cell;
line-height: 1.2em;
vertical-align:top;
}
.cell h1 {
margin-top:4px;
}
check with the fiddle
https://jsfiddle.net/bc7rf85k/4/

.table {
margin: 0 0 40px 0;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
display: table;
}
#media screen and (max-width: 580px) {
.table {
display: block;
}
}
.row {
display: table-row;
background: #f6f6f6;
}
.row:nth-of-type(odd) {
background: #e9e9e9;
}
.row.header {
font-weight: 900;
color: #ffffff;
background: #ea6153;
}
.row.green {
background: #27ae60;
}
.row.blue {
background: #2980b9;
}
#media screen and (max-width: 580px) {
.row {
padding: 8px 0;
display: block;
}
}
.cell {
padding: 6px 6px;
display: table-cell;
line-height: 1.2em;
vertical-align:top;
}
.cell h1 {
margin-top:4px;
}
#media screen and (max-width: 580px) {
.cell {
padding: 2px 12px;
display: block;
}
}
<div class="table">
<div class="row header green">
<div class="cell">
</div>
<div class="cell">
Name
</div>
<div class="cell">
Id
</div>
<div class="cell">
Author
</div>
<div class="cell">
Price
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.googleusercontent.com/P0aVrLO7Wxob0dIBx80m85wUyHFiK3-Xw7Xw_6CDFAogdeoRR0YWnSjkFNOR4M7nIA=w340" width="50" height="50">
</div>
<div class="cell">
<h1>Flightradar24 - Flight Tracker</h1>
<span>com.flightradar24pro</span>
</div>
<div class="cell">
com.flightradar24pro
</div>
<div class="cell">
Flightradar24 AB
</div>
<div class="cell">
$3.99
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.googleusercontent.com/JXJb3299C15MfJGA0wWoNCq-qNdNOuTXLuvd8mg0Wa3VRTPIDlPMfmUZK-Sn8WLiPz0=w340" width="50" height="50">
</div>
<div class="cell">
<h1>WatchMaker Premium Watch Face</h1>
<span>slide.watchFrenzy.premium</span>
</div>
<div class="cell">
slide.watchFrenzy.premium
</div>
<div class="cell">
androidslide
</div>
<div class="cell">
$3.99
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.ggpht.com/a125TbrsUMdstTX1UQDPlrIQkFphGp9SQpT30sE8vsEkBj33YulEgaeN8rmmgL5ngk0=w340" width="50" height="50">
</div>
<div class="cell">
<h1>Ski Tracks</h1>
<span>com.corecoders.skitracks</span>
</div>
<div class="cell">
com.corecoders.skitracks
</div>
<div class="cell">
Core Coders Ltd
</div>
<div class="cell">
$0.99
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.googleusercontent.com/WcL0Crw46EJubniXfwCZbVgO7JF9ToVjVjPwlqCqZOhLWtrp8mGjaoh865ZXdhiG1A=w340" width="50" height="50">
</div>
<div class="cell">
<h1>Weather Timeline - Forecast</h1>
<span>com.samruston.weather</span>
</div>
<div class="cell">
com.samruston.weather
</div>
<div class="cell">
Sam Ruston
</div>
<div class="cell">
$1.49
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.googleusercontent.com/dsQKC-6sq0rJZX3I1N5ivpU3fS8s-mokRlZnV8gDI9tIdt523j2df8AwwMHVGkvG76Q=w340" width="50" height="50">
</div>
<div class="cell">
<h1>Unified Remote Full</h1>
<span>com.Relmtech.RemotePaid</span>
</div>
<div class="cell">
com.Relmtech.RemotePaid
</div>
<div class="cell">
Unified Intents
</div>
<div class="cell">
$0.99
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh5.ggpht.com/YmbOfBlKGDy7K39ngf5m0vrXG8gK-gCORC1ybbtMVJa63MX1SPjtxi4jMQmRrcazgw=w340" width="50" height="50">
</div>
<div class="cell">
<h1>NOAA Weather Unofficial (Pro)</h1>
<span>com.nstudio.weatherhere</span>
</div>
<div class="cell">
com.nstudio.weatherhere
</div>
<div class="cell">
Granite Apps
</div>
<div class="cell">
$1.99
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.googleusercontent.com/HB1NQpjlT21nGLFXCc5lLHXqtft9CHNq8nLW16DDJF_d61_9CVYbEuRfrYGfIXI8V2Y=w340" width="50" height="50">
</div>
<div class="cell">
<h1>Password Manager SafeInCloud™</h1>
<span>com.safeincloud</span>
</div>
<div class="cell">
com.safeincloud
</div>
<div class="cell">
SafeInCloud
</div>
<div class="cell">
$2.99
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.googleusercontent.com/twhd0ckGPSETQH7TDkiYvrJr-FKQ-YP1Bll1_-Dk-1Bx4YdJJ1HwinVhHk6uy_YYEe8=w340" width="50" height="50">
</div>
<div class="cell">
<h1>Talon for Twitter</h1>
<span>com.klinker.android.twitter_l</span>
</div>
<div class="cell">
com.klinker.android.twitter_l
</div>
<div class="cell">
Luke Klinker
</div>
<div class="cell">
$1.49
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.googleusercontent.com/UgItAs4ckdGHTXTVWNQ0NNrWy9rh6ya4BrjwAUPMsgMpwOI2NQ7N0zvfQ8eyb78NzHE=w340" width="50" height="50">
</div>
<div class="cell">
<h1>Watch Face - Minimal & Elegant</h1>
<span>com.stmp.minimalface</span>
</div>
<div class="cell">
com.stmp.minimalface
</div>
<div class="cell">
Studio eXtreme
</div>
<div class="cell">
$1.59
</div>
</div>
<div class="row">
<div class="cell">
<img src="https://lh3.googleusercontent.com/OZQhEH8B9PNGPkOlx714tIK0mEjMBHUEoJdb2bqUY01i9SKh8iI66j9RMRRzYCvKpYc=w340" width="50" height="50">
</div>
<div class="cell">
<h1>Weather Live</h1>
<span>com.apalon.weatherlive</span>
</div>
<div class="cell">
com.apalon.weatherlive
</div>
<div class="cell">
Apalon Apps
</div>
<div class="cell">
$0.99
</div>
</div>
</div>

css display table cell requires percentage width

I've been put in a position where I need to use the display:table-cell command for div elements.
However I've discovered that the "cells" will only work correctly if a percentage is added to the width.
In this fiddle http://jsfiddle.net/NvTdw/ when I remove the percentage width the cells do not have equal widths, however when a percentage value is added to the width all is well, but only when that percentage is equal to the proportion of max no of divs, so for four columns 25%, five 20% and in this case five at 16.666%.
I thought maybe adding a percentage of less - say 1% would be a good fix all, but the cells fall out of line again.
Why is this?
.table {
display: table;
height: 200px;
width: 100%;
}
.cell {
display: table-cell;
height: 100%;
padding: 10px;
width: 16.666%;
}
.grey {
background-color: #666;
height: 100%;
text-align: center;
font-size: 48px;
color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
<div class="table">
<div class="cell">
<div class="grey">Block one</div>
</div>
<div class="cell">
<div class="grey">Block two</div>
</div>
<div class="cell">
<div class="grey">Block three</div>
</div>
</div>
<div class="table">
<div class="cell">
<div class="grey">Block</div>
</div>
<div class="cell">
<div class="grey">Block two</div>
</div>
</div>
<div class="table">
<div class="cell">
<div class="grey">Block one</div>
</div>
<div class="cell">
<div class="grey">Block two</div>
</div>
<div class="cell">
<div class="grey">Block three</div>
</div>
<div class="cell">
<div class="grey">Block four</div>
</div>
</div>
<div class="table">
<div class="cell">
<div class="grey">x</div>
</div>
<div class="cell">
<div class="grey">xx</div>
</div>
<div class="cell">
<div class="grey">xxx</div>
</div>
<div class="cell">
<div class="grey">xxxx</div>
</div>
<div class="cell">
<div class="grey">xxxxxx</div>
</div>
<div class="cell">
<div class="grey">Block five test</div>
</div>
</div>
<div class="table">
<div class="cell">
<div class="grey">Block</div>
</div>
<div class="cell">
<div class="grey">Block two</div>
</div>
<div class="cell">
<div class="grey">Block three</div>
</div>
</div>

You just need to add 'table-layout: fixed;'
.table {
display: table;
height: 100px;
width: 100%;
table-layout: fixed;
}
http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Note also that vertical-align:top; is often necessary for correct table cell appearance.
css table-cell, contents have unnecessary top margin