Fixing the view of display: table property - html

Question

I've tried to add a display:table to a parent element (rowcontainer) and display:table-cell; to the child element (div1, div2) for over 500px width on screen. This worked, but the padding on the child elements now have to left or right padding, and the bottom row has something off with it, any ideas on how to fix this? :
Here is also a codepen of the problem:
http://codepen.io/anon/pen/MYxegN
#media screen and (max-width: 499px) {
.div1,
.div2 {
color: blue;
}
}
#pagewrap {
padding: 10px;
background-color: rgba(21, 21, 21, 0.75);
border: 1px red solid;
max-width: 1024px;
min-height: 87.5% height: inherit;
margin: 0 auto;
}
h1,
h2 {
color: white;
}
p {
color: silver;
}
#tablecontainer {
padding: 5px 5px 5px 0px;
width: 100%;
min-height: 100%;
color: white;
font-size: 20px;
}
.div1,
.div2 {
padding: 5px;
margin: 5px;
}
.div1 {
background-color: darkgreen;
padding: 5px;
}
.div2 {
background-color: green;
}
#media screen and (min-width: 500px) {
.rowcontainer {
padding: 2.5px;
display: table;
width: 100%;
}
.rowcontainer div {
display: table-cell;
}
.div1 {
padding: 1.25px;
}
}
<div id="pagewrap">
<div id="tablecontainer">
<div class="rowcontainer">
<div class="div1">1</div>
<div class="div2">2</div>
</div>
<div class="rowcontainer">
<div class="div1">3</div>
<div class="div2">4</div>
</div>
<div class="rowcontainer">
<div class="div1">5</div>
<div class="div2">6</div>
</div>
<div class="rowcontainer">
<div class="div1">7</div>
<div class="div2">9</div>
</div>
<div class="rowcontainer">
<div class="div1">9</div>
<div class="div2">10</div>
</div>
</div>

Answer 1

I think the correct structure is like this for CSS table.
#tablecontainer {
display:table; /*behaves like <table>*/
}
.rowcontainer {
display:table-row; /*behaves like <tr>*/
}
.rowcontainer div {
display:table-cell; /*behaves like <td>*/
}

Answer 2

As far as I can tell, all that is needed is to add
table-layout:fixed
in the media query
#media screen and (min-width: 500px){
.rowcontainer {
padding:2.5px;
display:table;
table-layout: fixed;
border-spacing: 5px 0;
border-collapse: separate;
width:100%;
}
}
Codepen Updated.
#media screen and (max-width: 499px) {
.div1,
.div2 {
color: blue;
}
}
html {
background: url(img/nature.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#pagewrap {
padding: 10px;
background-color: rgba(21, 21, 21, 0.75);
border: 1px red solid;
max-width: 1024px;
min-height: 87.5% height: inherit;
margin: 0 auto;
}
h1,
h2 {
color: white;
}
p {
color: silver;
}
#tablecontainer {
padding: 5px 5px 5px 0px;
width: 100%;
min-height: 100%;
color: white;
font-size: 20px;
}
.div1,
.div2 {
padding: 5px;
margin: 5px;
}
.div1 {
background-color: darkgreen;
padding: 5px;
}
.div2 {
background-color: green;
}
#media screen and (min-width: 500px) {
.rowcontainer {
padding: 2.5px;
display: table;
table-layout: fixed;
width: 100%;
}
.rowcontainer div {
display: table-cell;
}
.div1 {
padding: 1.25px;
}
}
<div id="pagewrap">
<div id="tablecontainer">
<div class="rowcontainer">
<div class="div1">1</div>
<div class="div2">2</div>
</div>
<div class="rowcontainer">
<div class="div1">3</div>
<div class="div2">4</div>
</div>
<div class="rowcontainer">
<div class="div1">5</div>
<div class="div2">6</div>
</div>
<div class="rowcontainer">
<div class="div1">7</div>
<div class="div2">9</div>
</div>
<div class="rowcontainer">
<div class="div1">9</div>
<div class="div2">10</div>
</div>
</div>

Answer 3

Are you looking for something like this?
#media screen and (max-width: 499px) {
.div1,
.div2 {
color: blue;
}
}
#pagewrap {
padding: 10px;
background-color: rgba(21, 21, 21, 0.75);
border: 1px red solid;
max-width: 1024px;
min-height: 87.5% height: inherit;
margin: 0 auto;
}
h1,
h2 {
color: white;
}
p {
color: silver;
}
#tablecontainer {
padding: 5px 5px 5px 0px;
width: 100%;
min-height: 100%;
color: white;
font-size: 20px;
display: table;
border-spacing: 5px;
}
.div1,
.div2 {
padding: 5px;
margin: 5px;
}
.div1 {
background-color: darkgreen;
padding: 5px;
}
.div2 {
background-color: green;
}
#media screen and (min-width: 500px) {
.rowcontainer {
padding: 2.5px;
display: table-row;
}
.rowcontainer div {
display: table-cell;
}
.div1 {
padding: 1.25px;
}
}
<div id="pagewrap">
<div id="tablecontainer">
<div class="rowcontainer">
<div class="div1">1</div>
<div class="div2">2</div>
</div>
<div class="rowcontainer">
<div class="div1">3</div>
<div class="div2">4</div>
</div>
<div class="rowcontainer">
<div class="div1">5</div>
<div class="div2">6</div>
</div>
<div class="rowcontainer">
<div class="div1">7</div>
<div class="div2">9</div>
</div>
<div class="rowcontainer">
<div class="div1">9</div>
<div class="div2">10</div>
</div>
</div>

Answer 4

You are almost correct in making a table with div. The above problem is because of the text. (Last cell has 2 digit text, if you make it one digit it works fine ). To fix this issue use below code. In the rowcontainer just add width.
.rowcontainer div{
display:table-cell;
width:50%
}
Your complete code can be seen on http://codepen.io/gauravshankar/pen/OPqXga