Colspan alternative in <div> based structure - html

I want to use div elements to create a table-like layout.
What I want
.tableStyle td {
background: red;
color: #fff
}
.contentBox {
min-height: 200px;
}
<table class="tableStyle" width="100%" cellspacing="10">
<tr>
<td width="25%">
<div class="contentBox">One</div>
</td>
<td width="25%">Two</td>
<td width="50%" colspan="2">Three</td>
</tr>
<tr>
<td colspan="2">
<div class="contentBox">Four</div>
</td>
<td colspan="2">Five</td>
</tr>
</table>
What I have
.table {
display: table;
width: 100%;
border-collapse: separate;
border-spacing: 10px;
color: #fff
}
.table .row {
display: table-row;
}
.table .table-cell {
display: table-cell;
background: red;
width: 50%;
}
.contentBox {
min-height: 200px;
}
.table .smlCell {
width: 25%;
}
.table .table {
border-spacing: 0;
}
<div class="table">
<div class="row">
<div class="table-cell">
<div class="table">
<div class="row">
<div class="table-cell smlCell">
<div class="contentBox">One</div>
</div>
<div class="table-cell smlCell">
Two
</div>
</div>
</div>
</div>
<div class="table-cell">Three</div>
</div>
<div class="row">
<div class="table-cell">
<div class="contentBox">Four</div>
</div>
<div class="table-cell">Five</div>
</div>
</div>
I want to have equal spacing between the cells marked "One" and "Two".
I also want all cells in a row to be of same height.
After searching on net, I know that there are some limitations or issues
for display: table such as a lack of colspan/rowspan equivalents which may help what I'm trying to accomplish.
Is there anyway (apart form <table>) to create this?


Sure there is!
Demo Fiddle
HTML
<div class='table'>
<div class='row'>
<div class='table'>
<div class='cell'>One</div>
<div class='cell'>Two</div>
</div>
<div class='cell'>Three</div>
</div>
<div class='row'>
<div class='cell'>Four</div>
<div class='cell'>Five</div>
</div>
</div>
CSS
html, body{
width:100%;
height:100%;
margin:0;
padding:0;
}
.table {
display:table;
width:100%;
height:100%;
}
.cell {
display:table-cell;
width:50%;
}
.row {
display:table-row;
}
.cell {
background:red;
color:white;
border:5px solid white;
}


Try this. I have used inline instead of CSS class. You had placed one div in wrong location.
<div class="table">
<div class="row">
<div class="table-cell">
<div class="table">
<div class="row">
<div class="table-cell smlCell">
<div style="width:50% float: left" class="contentBox">One
</div>
<div style="width:50% float: right" class="contentBox">
Two
</div>
</div>
</div>
</div>
</div>
<div class="table-cell">Three</div>
</div>
<div class="row">
<div class="table-cell">
<div class="contentBox">Four</div>
</div>
<div class="table-cell">Five</div>
</div>
</div>


with support for older (ms-explorer?). But if your content is table by it's nature, use table and not those tricks :-)
<!DOCTYPE HTML>
<html>
<head>
<title>Bla!</title>
<style type='text/css'>
/* reset sizing model ... */
* { box-sizing: border-box; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; }
/* basic div definitions */
div { display:inline-block; min-height:50px; background-color:red; border:solid 3px white; }
/* 1/2 line div */
div.half { width:50%; }
/* 1/4 line div */
div.quater { width:25%; }
</style>
</head>
<body class='body' id='body' >
<div class='quater'> One </div><div class='quater'> Two </div><div class='half'> Three </div><div class='half'> Four </div><div class='half'> Five </div>
</body>
</html>

Related

Creating complex table using CSS

I want to create something like this using divs and it also should be without using display:table css rule etc. How do I create table header this??

May be try this as a starting point? You might need to tweak it a lot.
* {box-sizing: border-box;}
.row {overflow: hidden; clear: both;}
.cell {border: 1px solid #999; padding: 0px; float: left;}
.cell.full {float: none;}
.col-1 {width: 20%;}
.col-2 {width: 40%;}
.col-3 {width: 60%;}
.col-33 {width: 33.3%;}
.row-2 {height: 3em;}
<div class="row">
<div class="cell col-1 row-2">Subject</div>
<div class="cell col-3 row-2">
<div class="row">
<div class="cell full">First Term</div>
</div>
<div class="row">
<div class="cell col-33">October Test</div>
<div class="cell col-33">December Exam</div>
<div class="cell col-33">Term Average</div>
</div>
</div>
<div class="col-1 row-2 cell">Teacher's Evaluation</div>
</div>
Preview:

If you can use flexbox can i use flexbox
The benefit of using flexbox is that you can get the the same result as you using the table tag including vertical-align:middle.
In the snippet, keep attention to the text-alignment in the cells.
You can use flexboxgrid like this:
[class*="col"] {
text-align:center;
border:1px solid;
display: flex;
justify-content: center;
flex-direction: column;
}
<link href="http://cdn.jsdelivr.net/flexboxgrid/6.3.0/flexboxgrid.min.css" rel="stylesheet" />
<div class="row ">
<div class="col-xs-3">Subject</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">First Term</div>
</div>
<div class="row">
<div class="col-xs-4">October Test</div>
<div class="col-xs-4">December Exam</div>
<div class="col-xs-4">Term Average</div>
</div>
</div>
<div class="col-xs-3">Teacher's Evaluation</div>
</div>
The result:
http://jsbin.com/zetaro/edit?html,css,output

Just use colspan and rowspan =)
tutorial how to do it
I made it:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<table>
<tr>
<th rowspan="2"><br>Subject<br></th>
<th colspan="3">First term</th>
<th rowspan="2">Teacher's Evaluation</th>
</tr>
<tr>
<td>October test</td>
<td>December exam</td>
<td>Term Average</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
https://jsfiddle.net/b3aqLny1/

Try this
.table {
width: 100%;
table-layout: fixed;
display: table;
text-align: center;
}
.table .row{
display: table-row;
}
.table .row .col {
display: table-cell;
vertical-align: middle;
height: 100px;
border: 2px solid #333;
width: 33%;
}
.table .col.col-big {
width: 50%;
}
span {
display: inline-block;
padding: 10px;
}
.inner-table.table .row .col {border-width: 1px;}
<div class="table">
<div class="row">
<div class="col">
<span>Subject</span>
</div>
<div class="col col-big">
<div class="table inner-table">
<div class="row">
<div class="col one-col" style="width: 100%">
<span>First Term</span>
</div>
</div>
<div class="row">
<div class="table inner-table">
<div class="row">
<div class="col"><span>Test 1</span></div>
<div class="col"><span>Test 2</span></div>
<div class="col"><span>Test 3</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<span>Teacher's Evaluation</span>
</div>
</div>
</div>

Dompdf Bug of div which is not follow the css

The Dompdf has a bug that it does not base on the div css to scale size which the div has over the page size. I have tried the table which the css not work for it. How can i limit the size?
Here is the code:
HTML
<style>
.table {
display: table;
width:100px;
padding:5px;
}
.row {
display: table-row;
border-bottom: 1px solid black;
width:100px;
}
.cell {
display: table-cell;
width:100px;
border: 1px solid #000000;
text-align:left;
padding:3px;
}
.cell_DB{
width:100px;
}
</style>
<div class="table cell_DB" border="0" cellpadding="3">
<div class="row cell_DB" >
<div class="cell cell_DB" >
Title
</div>
</div>
<div class="row cell_DB">
<div class="cell cell_DB">
<p class="cell_DB">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br/>
<br/>
</p>
</div>
</div>
<div class="row cell_DB">
<div class="cell cell_DB">
<p class="cell_DB" style="color: blue">
</p>
</div>
</div>
</div>

This is currently solution which make the display to be block.
.cell_DB{
display:block;
}
<p style="word-wrap:break-word;width:98%;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

Try adding <div style="width:80%;"> ....CODES... </div> after </style> tag

How to set overflow-x: auto for nested div?

#create-summary {
width: 200px;
height:150px;
margin-top:20px;
overflow-x:auto;
overflow-y:auto;
}
.lv2 {
margin-left:15px;
}
.lv3, .lv4, .lv5, .lv6{
margin-left:15px;
}
#create-summary div {
border:1px solid red;
}
<div id="create-summary">
<div class="lv1">
1. Title1
<div class="lv2">1.1. Title1.1</div>
<div class="lv2">
1.2. Title1.2
<div class="lv3">1.2.1. Title1.2.1</div>
<div class="lv3">
1.2.2. Title1.2.2
<div class="lv4">
1.2.2.1. Title1.2.2.1
<div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
</div>
<div class="lv4">1.2.2.2. Title1.2.2.2
<div class="lv5">1.2.2.2.1. Title1.2.2.2.1</div>
<div class="lv5">1.2.2.2.2. Title1.2.2.2.2
<div class="lv6">1.2.2.2.2.1 Title1.2.2.2.2.1</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see the
class "lv6" and class"lv5" is not display correctly even I set overflow-x:auto.
How to set overflow:x auto to make it correctly?

You mean like that?
#create-summary {
width: 180px;
height:200px;
margin-top:20px;
overflow-x: auto;
}
.lv2 {
margin-left:15px;
}
.lv3, .lv4, .lv5, .lv6{
margin-left:15px;
white-space: nowrap;
}
<div id="create-summary">
<div class="lv1">
1. Title1
<div class="lv2">1.1. Title1.1</div>
<div class="lv2">
1.2. Title1.2
<div class="lv3">1.2.1. Title1.2.1</div>
<div class="lv3">
1.2.2. Title1.2.2
<div class="lv4">
1.2.2.1. Title1.2.2.1
<div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
</div>
<div class="lv4">1.2.2.2. Title1.2.2.2</div>
</div>
</div>
</div>
</div>

You need to make the whole div larger, Or you can set overflow-x to scroll.
#create-summary {
width: 250px;
height:200px;
margin-top:20px;
}
.lv2 {
margin-left:15px;
}
.lv3, .lv4, .lv5, .lv6{
margin-left:15px;
}
#create-summary div {
border:1px solid red;
}
<div id="create-summary">
<div class="lv1">
1. Title1
<div class="lv2">1.1. Title1.1</div>
<div class="lv2">
1.2. Title1.2
<div class="lv3">1.2.1. Title1.2.1</div>
<div class="lv3">
1.2.2. Title1.2.2
<div class="lv4">
1.2.2.1. Title1.2.2.1
<div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
</div>
<div class="lv4">1.2.2.2. Title1.2.2.2</div>
</div>
</div>
</div>
</div>

Add CSS white-space: nowrap; to lvl elements.

How do you make HTML elements appear on a vertical line using CSS?

Image of the problem:
How do I go from the one on the left, to the one on the right, using CSS?

You can use a table:
<table>
<tr>
<td>You own</td>
<td>20</td>
</tr>
<tr>
<td>Price</td>
<td>20</td>
</tr>
<tr>
<td>BPS</td>
<td>0.50</td>
</tr>
</table>
or floating divs:
<div style="display:inline-block;">
<div style="float:left; width:150px;">You own</div>
<div style="float:left;">20</div>
</div>
<div style="display:inline-block;">
<div style="float:left; width:150px;">Price</div>
<div style="float:left;">20</div>
</div>
<div style="display:inline-block;">
<div style="float:left; width:150px;">BPS</div>
<div style="float:left;">0.50</div>
</div>

<div>
<div id="left"> <!-- float left -->
<p>You Own></p>
<p>Price</p>
<p>BPS</p>
</div>
<div id="right">
<p>20</p>
<p>20</p>
<p>0.50</p>
</div>
</div>

Two divs
<div class="box">
Your own:<br />
Price:<br />
PBS
</div>
<div class="box">
20<br />
20<br />
50
</div>
CSS
.box {
float:left;
padding-right:40px;
}

While I am in agreement that this can be a table, you can easily do this with floats.
.container {
padding: 0.5em;
width: 200px;
background: #333;
color: #fff;
}
.button {
background: #efefef;
padding: 5px;
color: #000;
margin-bottom: 0.5em;
}
.item-header {
font-weight:bold;
float:left;
width: 45%;
clear:both;
}
<div class="container">
<div class="button">Buy Foreign Worker</div>
<div class="items">
<div class="item-header">You Own:</div>
<div class="item-value">20</div>
<div class="item-header">Price:</div>
<div class="item-value">20</div>
<div class="item-header">BPS:</div>
<div class="item-value">0.5</div>
</div>
</div>
All you are doing is making the header values float to the left, and the clear ensures that it starts on a new row.

How to achieve table layout without using tables?

In the name of progress (and learning) how can I rid tables from my code and achieve the same layout?
For example, here is my table:
<table cellspacing="0px">
<tr>
<td>
<img src="http://www.poltairhomes.com/images/footerlogo.png" />
</td>
<td id="footertext">
<p>Poltair Homes Plc<br />Registered Office: The Old Chapel, Greenbottom, Truro, Cornwall, TR4 8QP.<br />Registered in England & Wales: 3955425<br />www.poltairhomes.com<br />info#poltairhomes.com</p>
</td>
<td id="footertext">
<p>Terms and Conditions | Privacy Policy | Sitemap</p>
</td>
<td id="footertext">
<p>SIGN UP FOR OUR NEWSLETTER:</p>
<img src="http://www.poltairhomes.com/images/signup(temp).png" />
</td>
</tr>
</table>
And the relevant CSS:
.footertext {
margin: 0;
padding:0 5px 0 5px;
color: #AAA;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
border-left: 1px solid #CCC;
}
http://jsfiddle.net/userdude/tYjKw/

CSS:
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
HTML:
<div class="table">
<div class="table-row">
<div class="table-cell">Table cell 1</div>
<div class="table-cell">Table cell 2</div>
</div>
</div>

<div class="table">
<div class="row">
<div class="cell twocol">
<span>Content1</span>
</div>
<div class="cell twocol">
<span>Content2</span>
</div>
</div>
<div class="row">
<div class="cell onecol">
<span>Content3</span>
</div>
</div>
</div>
And the CSS
.table {width: 100%; height: 100%;}
.row {width: 100%; min-height: 1px; height: auto; margin: 0;}
.cell {float: left; margin: 0; padding: 0;}
.onecol {width: 100%;}
.twocol {width: 50%;}
I suggest you look into some gridsystems, like 960grid (http://960.gs/) or 1140grid (http://cssgrid.net/), will help you a lot.

Create a style as:
.footerItem { float: left; }
<div class="footerItem">
<img src="http://www.poltairhomes.com/images/footerlogo.png" />
</div>
<div class="footerItem">
<p>Poltair Homes Plc<br />Registered Office: The Old Chapel, Greenbottom, Truro, Cornwall, TR4 8QP.<br />Registered in England & Wales: 3955425<br />www.poltairhomes.com<br />info#poltairhomes.com</p>
</div>
<div class="footerItem">
<p>Terms and Conditions | Privacy Policy | Sitemap</p>
</div>
<div class="footerItem">
<p>SIGN UP FOR OUR NEWSLETTER:</p><img src="http://www.poltairhomes.com/images/signup(temp).png" />
</div>
and then create your body using DIVs to separate the blocks and apply the class to each one: