How to create table using div tags such that columns in a row should take the width based on available space in the column div.
In below code, first row 3 columns should take available width.
<style>
.tabl {
width:400px;
height:400px;
border:5px solid blue;
display:table
}
.row {
height:200px;
display:table-row;
clear:both;
}
.cell {
border:1px solid black;
display:table-cell
}
</style>
<div class="tabl">
<div class="row">
<div class="cell"> CELL one</div>
<div class="cell"> CELL two</div>
<div class="cell"> CELL three</div>
</div>
<div class="row">
<div class="cell"> CELL one</div>
<div class="cell"> CELL two</div>
<div class="cell"> CELL three</div>
<div class="cell"> CELL four</div>
</div>
</div>
A solution can be this, with jquery;
var rows = $('.row').length;
var widthrow = parseInt(100, 10) / parseInt(rows, 10);
$('.row').each(function(i, obj) {
$(this).outerHeight(widthrow+'%');
var count = $(this).children().length;
var w = parseInt(100, 10) / parseInt(count, 10);
$(this).children('div').each(function(i, obj) {
$(this).outerWidth(w+'%');
});
});
*{
box-sizing: border-box;
}
.tabl {
width: 400px;
height: 400px;
border: 5px solid blue;
}
.row {
height: 200px;
width: 100%;
overflow: hidden;
}
.cell {
border: 1px solid black;
float: left;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabl">
<div class="row">
<div class="cell">CELL one</div>
<div class="cell">CELL two</div>
<div class="cell">CELL three</div>
</div>
<div class="row">
<div class="cell">CELL one</div>
<div class="cell">CELL two</div>
<div class="cell">CELL three</div>
<div class="cell">CELL four</div>
</div>
<div class="row">
<div class="cell">CELL one</div>
<div class="cell">CELL two</div>
</div>
</div>
Have you thought about using Bootstrap? It utilizes 12 column grid system? I won't encourage the use of tables in Web Design today. You can find everything you need to know on the bootstrap website. http://getbootstrap.com
Related
Forget how to code a div style table.
I haven't coded html in years and am pretty rusty. I'm trying to create a responsive div style table with the first div spans the entire column with 2 more divs next to it. A div with 2 cells on top and a div that spans the 2 cells on bottom.
I'm trying to create something that looks like this image.
<div class="table">
<div class="row">
<div class="cell">cell 1</div>
</div>
<div class="row">
<div class="cell">cell 1</div>
<div class="cell">cell 2</div>
</div>
<div class="row">
<div class="cell colspan">
<div><div>
cell 3
</div></div>
</div>
<div class="cell"></div>
</div>
Use flexbox. By assigning display: flex; to the .table, .row, and .column elements, child elements of each all become flexible and can easily be controlled to take up certain percentages of space within the table, and grow to fill all the available space like a table would.
The flex property takes a little getting used to. Here I used it to tell flex items to grow (the first value, flex-grow), and starting widths (the third value, flex-basis). This resource makes it pretty easy to understand: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
* { box-sizing: border-box; }
.table,
.row,
.column {
display: flex;
}
.column {
flex: 1 0 50%;
flex-direction: column;
}
.first-column {
flex-basis: 33%;
}
.cell {
flex: 1 0 100%;
padding: 20px;
border: 1px solid dodgerblue;
}
.first-row .cell {
border-left: none;
}
.second-row .cell {
border-top: none;
border-left: none;
}
<div class="table">
<div class="column first-column">
<!-- just the one cell in this column -->
<div class="cell">cell 1</div>
</div>
<div class="column">
<!-- need 2 rows here -->
<div class="row first-row">
<!-- first row will have 2 columns -->
<div class="column">
<div class="cell">cell 2</div>
</div>
<div class="column">
<div class="cell">cell 3</div>
</div>
</div>
<div class="row second-row">
<div class="cell">cell 4</div>
</div>
</div>
</div>
For some reason the cells in my second row in my table are changing the width of the cells in the row above. I have no idea why this is the cause. I don't want the width of the first cell in the first row to be changed. I have reproduced the problem in jsfiddle to make it clear what I mean.
FiddleJS link:
https://jsfiddle.net/bpyrgsvc/1/
HTML:
<div class="table">
<div class="row">
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
</div>
<div class="row">
<div class="cell">this changes the width of the cell above</div>
</div>
</div>
CSS:
.table {
display:table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 5px;
border: 1px solid black;
}
With CSS you can build a table using a table element and then style how you want using display: block and inline-block. Though if your need really is as simple as it appears to be then a simple colspan will do the jobs.
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4"></td>
</tr>
</table>
Appending table within the cell should clarify your issue. Refer the snippet below
.table {
display:table;
table-layout: fixed;
width: 100%;
border-collapse:collapse
}
.row {
display: table-row;
}
.cell.p0{
padding:0;
border:none
}
.cell {
display: table-cell;
padding: 5px;
border: 1px solid black;
}
.cell-full {
// full width of table
}
<div class="table">
<div class="row">
<div class="cell p0">
<div class="table">
<div class="row">
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="cell cell-full">this changes the width of the cell above</div>
</div>
</div>
I don't see anything wrong with the results. In a div set to be displayed as table and table-row, it is behaving as tables.
To get the result you want, close the first table and start another.
<div class="table">
<div class="row">
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
</div>
</div>
<div class="table">
<div class="row">
<div class="cell cell-full">this changes the width of the cell above</div>
</div>
</div>
https://jsfiddle.net/bpyrgsvc/4/
Flexbox can do that:
.row {
display: flex;
}
.cell {
flex: 1;
padding: 5px;
border: 1px solid black;
}
<div class="table">
<div class="row">
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
<div class="cell">test</div>
</div>
<div class="row">
<div class="cell">this NO LONGER changes the width of the cell above</div>
</div>
</div>
Another way is to set no wrap for whitespaces in css.
<div class="no-wrap-cell">This goes in a single line</div>
.no-wrap-cell{
white-space: nowrap !important;
}
I am trying to make 2 columns, underneath one of the column need to have 3 rows. each rows has seperate number of cells. but it's not working for me. it should 100% wide, but it look like inline-table - how to fix this?
#table {
display:table;
width:100%
}
.row {
display:table-row;
}
.cell {
display:table-cell;
border:1px solid grey;
}
.row1 {
display: table-caption;
}
.cell1 {
width:30%
}
<div id="table">
<div class="row">
<div class="cell cell1">30%</div>
<div class="cell cell2">
<div class="row row1">
<div class="cell"><h2>90%</h2></div>
<div class="cell"><h2>10%</h2></div>
</div>
<div class="row row2">
<div class="cell"><h2>40%</h2></div>
<div class="cell"><h2>20%</h2></div>
<div class="cell"><h2>20%</h2></div>
<div class="cell"><h2>20%</h2></div>
</div>
<div class="row row2">
<div class="cell"><h2>100%</h2></div>
</div>
</div>
</div>
</div>
Spending way too much time on (what should be) a simple div table. PROBLEM: the column headers will not resize to the width of the table, or the rows. The rows appear okay, but the column headers don't.
Trying to avoid having fixed widths as the next table I post may have a different number of columns. With the following code the column headers are all scrunched to the left, next to each other, but they don't match the rows...
<style type="text/css">
.table-container {
display: table;
width: 50%;
table-layout: fixed;
border-collapse: collapse;
}
.table-heading {
font-weight: bold;
display: table-caption;
background-color: #e9e9e9;
text-align: center;
padding: 8px;
line-height: 21px;
font-size: 18px;
color: #CA8327;
}
.table-row {
display: table-row;
text-align: center;
}
.table-row-shade {
display: table-row;
text-align: center;
background-color: #e9e9e9;
}
.table-col {
display: table-cell;
text-align: center;
border: 1px solid #ca8327;
}
</style>
<div class="table-container">
<div class="table-heading">Approximate Dimensions (inches)</div>
<div class="table-col">
<div class="table-col">size</div>
<div class="table-col">head strap (inc. frame)</div>
<div class="table-col">chin strap</div>
<div class="table-col">lbs.*</div>
</div>
<div class="table-row-shade">
<div class="table-col">XXS</div>
<div class="table-col">3-9 inches</div>
<div class="table-col">2-3 inches</div>
<div class="table-col">< 5 lbs*</div>
</div>
<div class="table-row">
<div class="table-col">XS</div>
<div class="table-col">5-13 inches</div>
<div class="table-col">3-7 inches</div>
<div class="table-col">5 - 10lbs*</div>
</div>
</div>
http://jsfiddle.net/Speedy1/t3e3ken6/
You only put table-col rather than table-row
<div class="table-container">
<div class="table-heading">Approximate Dimensions (inches)</div>
<div class="table-row"> <!-- must be a table-row -->
<div class="table-col">size</div>
<div class="table-col">head strap (inc. frame)</div>
<div class="table-col">chin strap</div>
<div class="table-col">lbs.*</div>
</div>
<div class="table-row-shade">
<div class="table-col">XXS</div>
<div class="table-col">3-9 inches</div>
<div class="table-col">2-3 inches</div>
<div class="table-col">< 5 lbs*</div>
</div>
<div class="table-row">
<div class="table-col">XS</div>
<div class="table-col">5-13 inches</div>
<div class="table-col">3-7 inches</div>
<div class="table-col">5 - 10lbs*</div>
</div>
</div>
http://jsfiddle.net/vgjb578s/
Try this http://jsfiddle.net/t3e3ken6/1/
It's because you have put the class "table-col" next to your heading. Change it to "table-row" and the problem is solved.
<div class="table-row">
<div class="table-col">size</div>
<div class="table-col">head strap (inc. frame)</div>
<div class="table-col">chin strap</div>
<div class="table-col">lbs.*</div>
</div>
The task is pretty strange. I have to create html table BUT I'm not allowed to use traditional <table> tag. My table should look like this:
It would be easy to do it like below:
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="5"></td>
</tr>
...
but, as I said, I'm not allowed to use traditional table tags (table, tr, td, th). Here is JSFIddle of what I have at the moment. How can I get the same result as with <td colspan="5"></td> but using only divs and CSS.
EDITS:
* Table cell's width in one row must not be fixed, it should be dynamic and it should be possible to make them (cells) different width (in one row).
* Table cell's width in different rows of the same column must be equal. Like in traditional table. Only "colspanned" cell's width must be different.
As stated in CSS 2.1 specification in part "17.5 Visual layout of table contents"
Cells may span several rows or columns. (Although CSS 2.1 does not define how the number of spanned rows or columns is determined ...
So the answer is easy! Don't think of CSS tables exactly the same as HTML tables. As there are some differences like what mentioned in "17.2.1 Anonymous table objects":
... the "missing" elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element. ...
So you can do it this way (each row as a table and dropped table-row for avoiding unnecessary div block) until they specify a way for defining number of spanned rows or columns:
CSS
.row {
display: table;
width: 100%;
}
.cell {
display: table-cell;
width: 16.67%;
}
.wideCell {
display: table-cell;
}
HTML
<div class="row">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Five</div>
<div class="wideCell">Six</div>
</div>
<div>One Two Three Four Five Six</div>
<div class="row">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Five</div>
<div class="wideCell">Six</div>
</div>
You need to use CSS float and width to get the table-like effect you're looking for. What I'm basically doing is I'm placing 5 divs all with a fixed width and class name, and floating them to the left. The wideCell has the same width the .wrapper which just holds them all together in a nice block.
HTML
<div class="wrapper">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="wideCell"></div>
</div>
CSS
.wrapper {
width:510px;
}
.cell {
width:100px;
height:50px;
background-color:#ff0000;
float:left;
border:1px #000 solid;
}
.wideCell {
width:508px;
height:50px;
background-color:#ff0000;
float:left;
border:1px #000 solid;
}
DEMO
EDIT
CSS
.table{
width: 100%;
}
.table .row{
width: 100%;
height: 25px;
margin: 0px;
padding: 0px;
}
.table .row .cell{
width: 150px;
float: left;
border: solid 1px #CCC;
height: 25px;
}
.table .clear_float{
clear: both;
}
.table .row .cell.rowspan{
width: 759px;
border: solid 1px #CCC;
}
html
<div class="table">
<div class="row">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Five</div>
</div>
<div class="clear_float" />
<div class="row">
<div class="cell rowspan">
One Two Three Four Five
</div>
</div>
<div class="clear_float" />
<div class="row">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Five</div>
</div>
<div class="clear_float" />
<div class="row">
<div class="cell rowspan">
One Two Three Four Five
</div>
</div>
<div class="clear_float" />
<div class="row">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Five</div>
</div>
<div class="clear_float" />
<div class="row">
<div class="cell rowspan">
One Two Three Four Five
</div>
</div>
</div>
I have searched a lot there is nothing like colspan in display:table CSS.
You can try this: CSS display:table
<div style="display:table;">
<div style="display:table-row;">
<span style="display:table-cell;">Name</span>
<span style="display:table-cell;"><input type="text"/></span>
</div>
<div style="display:table-row;">
<span style="display:table-cell;">E-Mail</span>
<span style="display:table-cell;"><input type="text"/></span>
</div>
<div style="display:table-row;">
<span style="display:table-cell;">Password</span>
<span style="display:table-cell;"><input type="text"/></span>
</div>
</div>
<div style="display:table;">
<div style="display:table-row; " >
<span style="display:table-cell;">
<button>Send Message</button>
</span>
</div>
</div>
You can do this ( where data-x has the appropriate display:xxxx set ):
<!-- TH -->
<div data-tr>
<div data-th style="width:25%">TH</div>
<div data-th style="width:50%">
<div data-table style="width:100%">
<div data-tr>
<div data-th style="width:25%">TH</div>
<div data-th style="width:25%">TH</div>
<div data-th style="width:25%">TH</div>
<div data-th style="width:25%">TH</div>
</div>
</div>
</div>
<div data-th style="width:25%">TH</div>
</div>
<!-- TD -->
<div data-tr>
<div data-td style="width:25%">TD</div>
<div data-th style="width:50%">
<div data-table style="width:100%">
<div data-tr>
<div data-td style="width:25%">TD</div>
<div data-td style="width:25%">TD</div>
<div data-td style="width:25%">TD</div>
<div data-td style="width:25%">TD</div>
</div>
<div data-tr>
...
</div>
</div>
</div>
<div data-td style="width:25%">TD</div>
</div>
Check this fiddle out i hope that would suffice what you need
html tables
CSS
div.table {border: 1px solid black; display: table; }
div.tr {border: 1px solid black; display: table-row; }
div.td {border: 1px solid black; display: table-cell; }
Html
<div class="table">
<div class="tr">
<div class="td">Row 1, Cell 1</div>
<div class="td">Row 1, Cell 2</div>
<div class="td">Row 1, Cell 3</div>
</div>
<div class="tr">
<div class="td">Row 2, Cell 1</div>
<div class="td">Row 2, Cell 2</div>
<div class="td">Row 2, Cell 3</div>
</div>