How to make align text to top in css table cell - html

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>

Related

Make a grid responsive to its parent width

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>

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>

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 ?

3x3 circle icon grid with caption

I am looking for ways to add in a 3x3 grid of circle icons to my website. Each icon needs to contain a caption text (including sub-caption text) and be spaced evenly apart. The center icons need to be in the center of the webpage.
I unfortunately have been stuck for the last couple of hours, and I have no idea on how to achieve this. I would appreciate any help.

Here is a mostly flexbox grid with square cells and centered content that will evenly space the circle/text.
* {
box-sizing: border-box; margin: 0; padding: 0;
}
.grid {
display: flex;
flex-wrap: wrap;
max-width: 960px;
width: 90%;
margin: auto;
background: #eee;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #fff;
}
.cell:before {
padding-bottom: 100%;
display: block;
content: '';
}
.circle {
background: #ccc;
border-radius: 50%;
width: 100px;
height: 100px;
margin: 0 auto 1em;
}
.inner {
text-align: center;
}
<div class="grid">
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle"></div>
<div class="caption">
<h2>text</h2>
<h3>sub</h3>
</div>
</div>
</div>
</div>

How to make the grid system centered horizontally?

I want to get the grid system to center but it won't, i was thinking maybe it has something to do with my pictures' border?. here's the screen shotwhat it is right now
what i want it to be
HTML:
<div class=" container">
<div class="row">
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
</div>
</div>
CSS:
.optionBorder
{
border: 1px solid #f5f5f5;
height: 130px;
width: 130px;
line-height: 130px;
text-align: center;
}

Take another element before row with some width and make them center
for example.:
HTML
<div class="test">
<div class="row">
<div class="col-md-4">
<div class="optionBorder">
<img src="http://placehold.it/350x150" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="http://placehold.it/350x150" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="http://placehold.it/350x150" height="74px" width="50px">
</div>
</div>
</div>
</div>
CSS
.test {
width: 450px;
margin: auto;
margin-bottom: 15px;
}
bootply

<style>
.paraentCont{
width:100%;
max-width:300px;
margin:auto;
}
</style>
<div class=" container">
<div class="paraentCont">
<div class="row">
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
</div>

Give to .row fixed width such as 700px, and margin-left/right auto
look at this example http://www.bootply.com/GFDHc6p5tg

Actually here is there right way to go while using Bootsrap
Use the predefine class text-center
Use q Bootstrap helper like .inline-block{display: inline-block}
.inline-block{display: inline-block}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class=" container">
<div class="row text-center">
<div class="col-md-4 inline-block">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4 inline-block">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
<div class="col-md-4 inline-block">
<div class="optionBorder">
<img src="images/page-1.svg" height="74px" width="50px">
</div>
</div>
</div>
</div>