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>
Related
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;
}
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
I know this question has been asked before. However, I do not seem to find my mistake.
I set up a plnkr. I try to align some text vertically, whereas the the stuff that needs to be aligned is nested into multiple divs.
<div class="news col-md-12" id="detailsView" >
<div class="col-md-8 ">
<div class="row">
<div class="col-md-5 widthInDetails">
<div class="row">
<div class="col-md-8" id="newsDetails">
Hello I am fine and how are your (I am good too)
</div>
</div>
</div>
</div>
</div>
</div>
and in my CSS I have this.
.news{
background-color:black;
line-height:200px;
width:200px;
height:200px;
display:table;
}
#newsDetails{
display:table-cell;
vertical-align:middle;
}
So basically I have I lineheight given from the outer div with class="news". I want the the nested div to be aligned vertically. Is there any way to do this?
http://plnkr.co/edit/cMaCrG1Y8Ky48HwtgNPk?p=preview
If you want to use the display: table property, you should set it in the parent node, like:
<div class="news col-md-12" id="detailsView" >
<div class="col-md-8 ">
<div class="row">
<div class="col-md-5 widthInDetails">
<div id="newsParent" class="row">
<div class="col-md-8" id="newsDetails">
Hello I am fine and how are your (I am good too)
</div>
</div>
</div>
</div>
</div>
</div>
.news{
background-color:black;
width:200px;
height:200px;
}
#newsParent {
display:table;
}
#newsDetails{
height: 200px;
display:table-cell;
vertical-align:middle;
}
Give it a try and let me know if it helps!
You can make wrapper display: table and child div display: table-cell; vertical-align: middle;. find the below jsfiddle demo.
HTML
<div class="news col-md-12" id="detailsView" >
<div class="col-md-8 ">
<div class="row">
<div class="col-md-5 widthInDetails">
<div class="row newsDetailswrap">
<div class="col-md-8" id="newsDetails">
Hello I am fine and how are you?</div>
</div>
</div>
</div>
</div>
</div>
CSS
.newsDetailswrap{
background: red;
height: 100px;
display:table;
}
#newsDetails{
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/hhbnywq1/
in my code div add dynamic and i don't want to use extra div like <div class"left/right"> for contain left or right div.
<div class="container">
<div class="row">
<div class="col-md-8 left">demo1</div>
<div class="col-md-8 left">demo2</div>
<div class="col-md-4 right">demo3</div>
</div>
</div>
using this code my div look like
------------------
| demo1 |
------------------
| demo2 | demo3 |
------------------
but i want, for ex.
------------------
| demo1 | demo3 |
------------------
| demo2 | demo4 |
------------------
| demo5 |
mean right div set always right or left on left side.
if there is any solution in Bootstrap then its good for me.
You should remove the .row container as it is restricting the element to belong inside that container itself. I tried this using float: left and float: right.
HTML
<div class="container">
<div class="col-md-8 left">demo1</div>
<div class="col-md-8 left">demo2</div>
<div class="col-md-4 right">demo3</div>
<div class="col-md-4 right">demo4</div>
<div class="col-md-8 right">demo5</div>
<div class="col-md-8 left">demo6</div>
<div class="col-md-4 right">demo7</div>
<div class="col-md-4 right">demo8</div>
</div>
CSS
* {
box-sizing: border-box;
}
.left {
float: left;
background-color: green;
}
.right {
float: right;
background-color: red;
}
.container > div {
width: 50%;
height: 100px;
margin: 5px 0px;
}
.left + .left {
clear: left;
}
.right + .right {
clear: right;
}
.right + .right ~ .left, .left + .left ~ .right {
position: relative; /* or use just margin-top */
top: -110px; /* height + margin-top + margin-bottom */
}
Working Fiddle
[Note]: If you have more elements of left/right in serial wise, then you should use like this:
.right + .right + .right ~ .left, .left + .left + .left ~ .right{
position: relative;
top: -220px;
}
Method 1
Using twitter bootstrap structure
<div class="container">
<div class="row">
<div class="col-md-6">demo1</div>
<div class="col-md-6">demo2</div>
</div>
<div class="row">
<div class="col-md-6">demo3</div>
<div class="col-md-6">demo4</div>
</div>
<div class="row">
<div class="col-md-6">demo5</div>
<div class="col-md-6">demo6</div>
</div>
</div>
Method 2
Or you can simple try that
<div class="container">
<div class="row">
<div class="col-md-12" id="equaldivs">
<div>demo1</div>
<div>demo2</div>
<div>demo3</div>
<div>demo4</div>
<div>demo5</div>
<div>demo6</div>
</div>
</div>
</div>
and into your style.css
#equaldivs div:nth-child(odd) {
width:50%;
float:left
}
#equaldivs div:nth-child(even) {
width:50%;
float:right
}
Try this
HTML
<div class="row">
<div class="col-md-8 left">demo1</div>
<div class="col-md-8 left">demo2</div>
<div class="col-md-4 right">demo3</div>
<div class="col-md-8 left">demo4</div>
<div class="col-md-4 right">demo5</div>
<div class="col-md-4 right">demo6</div>
<div class="col-md-4 left">demo7</div>
</div>
CSS
.row{width:100%}
.left{width:50%; float:left; min-height:20%; clear:left;}
.right{width:50%; float:right; margin-left:-50%; min-height:20%; clear:right}
If you want without Container Then you can use below code.
<div class="col-md-12">
<div class="Col-md-6">
<p>Left Side</p>
</div>
<div class="Col-md-6">
<p>Right Side</p>
</div>
</div>
You can achieve the desired view with a very little re-arrangement.
<div class="container">
<div class="row">
<div class="col-md-8 left">demo1</div>
<div class="col-md-4 right">demo3</div>
<div class="col-md-8 left">demo2</div>
<div class="col-md-4 right">demo4</div>
</div>
</div>
See it in action here.
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>