My data is like this
<div class="fl1">floor 1</div>
<div class="fl2">floor 2</div>
<div class="fl2">floor 2</div>
<div class="fl2">floor 2</div>
<div class="fl3">floor 3</div>
Is it possible to display it like this
Mainly you have to use colspan
<table >
<tr>
<td colspan="3" style="width:100%">TEXT</td>
</tr>
<tr>
<td >TEXT</td><td >TEXT</td><td >TEXT</td>
</tr>
<tr>
<td colspan="3" style="width:100%">TEXT</td>
</tr>
</table>
table, th, td {
border: 1px solid black;
}
Try this, Using div and flex.
.cont{
width:200px;
height:100%;
border-style: solid;
}
.f1{
border-style:solid;
margin: 2px;
}
.fl2{
border-style:solid;
width:100%;
margin:2px;
}
.cont2{
display:flex;
}
<div class="cont">
<div class="f1">floor1</div>
<div class="cont2">
<div class="fl2">floor2</div>
<div class="fl2">floor3</div>
<div class="fl2">floor4</div>
</div>
<div class="f1">floor5</div>
</div>
This way basically:
<div style="width:500px;border-style:double">
<div style="border-style:solid;border-width: 1px;">
<div>floor 1</div>
</div>
<div style="display:inline-block; padding-top:2px;padding-left:1px">
<div style="float:left;width:100px;border-width:1px;border-style:solid">floor 2</div>
<div style="float:left;width:100px;border-width:1px;border-style:solid; margin-left:1px">
floor 2</div>
<div style="float:left;width:100px;border-width:1px;border-style:solid; margin-left:1px">floor 2</div>
</div>
<div style="border-style:solid;border-width: 1px;">
<div>floor 1</div>
</div>
</div>
Related
I'm trying to display some boxes as a grid in order from box 1 to box 10. So it would look like:
[Box1] [Box2] [Box3] [Box4] [Box5]
[Box6] [Box7] [Box8] [Box9] [Box10]
Currently, my boxes look like this:
[Box1] [Box2] [Box3] [Box4] [Box5] [Box6] [Box7]
[Box8] [Box9] [Box10]
.boxes {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 4% 0;
color: white;
}
<div class="boxes">
<div class="box-one">Box 1</div>
<div class="box-two">Box 2</div>
<div class="box-three">Box 3</div>
<div class="box-four">Box 4</div>
<div class="box-five">Box 5</div>
<div class="box-six">Box 6</div>
<div class="box-seven">Box 7</div>
<div class="box-eight">Box 8</div>
<div class="box-nine">Box 9</div>
<div class="box-ten">Box 10</div>
</div>
Any idea what I'm doing wrong?
Using CSS Grid will make it as simple as this:
.boxes {
display: grid;
grid-template-columns : repeat(5,1fr);
gap : 2rem;
}
/* for having some visuals */
.boxes > div{
border:1px solid red;
min-height : 100px
}
<div class="boxes">
<div class="box-one">Box 1</div>
<div class="box-two">Box 2</div>
<div class="box-three">Box 3</div>
<div class="box-four">Box 4</div>
<div class="box-five">Box 5</div>
<div class="box-six">Box 6</div>
<div class="box-seven">Box 7</div>
<div class="box-eight">Box 8</div>
<div class="box-nine">Box 9</div>
<div class="box-ten">Box 10</div>
</div>
You could also use Flexbox, but you have to do some calculations :
.boxes {
display: flex;
gap : 2rem;
flex-wrap:wrap;
}
.boxes > div{
border:1px solid red;
min-height : 100px;
flex:none;
width:calc(20% - 1.75rem);
}
<div class="boxes">
<div class="box-one">Box 1</div>
<div class="box-two">Box 2</div>
<div class="box-three">Box 3</div>
<div class="box-four">Box 4</div>
<div class="box-five">Box 5</div>
<div class="box-six">Box 6</div>
<div class="box-seven">Box 7</div>
<div class="box-eight">Box 8</div>
<div class="box-nine">Box 9</div>
<div class="box-ten">Box 10</div>
</div>
easy way to accomplish that is with css grid not flex
.boxes {
display: grid;
grid-template: "1 2 3 4 5"
"6 7 8 9 10";
grid-gap: 6px; /*gap between child*/
}
.boxes > div {
/*set child's background color*/
background-color: darkcyan;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boxes</title>
</head>
<body>
<table border="2px" style="width:100%">
<tbody>
<tr>
<td><br /></td>
<td><br /></td>
<td><br /></td>
<td><br /></td>
<td><br /></td>
</tr>
</tbody>
<tbody>
<tr>
<td><br /></td>
<td><br /></td>
<td><br /></td>
<td><br /></td>
<td><br /></td>
</tr>
</tbody>
</table>
</body>
</html>
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 have a complicated layout created with real tables and it works fine but now I created a new layout using DIVS and it worked fine until I tested height on cellphones and it looks pretty bad, it just don't want to keep my height 100% tested also set footer to margin bottom 0 and nothing so I will test the follow:
<table style="width:100%;height:100%;border:0;border-spacing:0px;border-collapse:collapse;">
<tr>
<td style="height:21px;">
<DIV style="display: table-cell;"> divvvvv </div></td>
</tr>
<tr>
<td style="height:79px;"">
</td>
</tr>
<tr>
<td style="height:100%;"> </td>
</tr>
<tr>
<td style="height:21px;"> </td>
</tr>
</table>
The question is, can I add those divs inside the table TD element without adding div-display-table and div-display-row before? It seems like the best way to go for me is to mix tables and divs. What would then be the correct way of mixing them? Because TDs in Tables will not respect the height and width neither so I must use both tables and divs seems like ...
Like this:
<div class="container">
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
</div>
Mixing in table elements with divs is eventually going to give you a headache, especially when it comes to responsive design. For this same issue, I use Bootstrap CSS. They have a grid system that is extremely effective in replacing table-style layouts and adapting to mobile devices. Your target HTML is actually really close to the markup that Bootstrap uses, so your head is obviously int he right place!
After downloading the Bootstrap js and css, I would do something like this:
<!-- the container-fluid class creates a full-width container -->
<div class="container-fluid">
<!-- the row class creates a row broken into 12 columns. -->
<div class="row">
<!-- specify how many columns an element should take up out of 12 for each given device. below is the markup for 3 evenly-spaced columns for a medium (desktop) device -->
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>
I tried to understand what you are wanting but it wasn't very clear...so this is what I assumed you meant.
DEMO
CSS:
.container {
display:table;
height:200px;
border:1px solid red;
}
.column {
display:inline-block;
}
table {
border: 1px solid black;
}
td {
width:150px;
border: 2px solid blue;
}
HTML:
<table style="width:100%;height:100%;border:0;border-spacing:0px;border-collapse:collapse;">
<tr>
<td style="height:21px;">
<div class="container">
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="height:79px;"">
</td>
</tr>
<tr>
<td style="height:100%;"> </td>
</tr>
<tr>
<td style="height:21px;"> </td>
</tr>
</table>
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.
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>