Table grid using Div in HTML and CSS - html

I want to create a table grid using DIV (HTML & CSS only). I almost got into and still got some issues. I attached the sample image. I want the grid should be the same like this sample image. I attached the fiddle of what I created so far. Could you help somebody that what am doing and how can I improve to finish the table as same as the image?
HTML:
<div class="containerDiv">
<div class="rowDivHeader">
<div class="cellDivHeader">Recommendation</div>
<div class="cellDivHeader">Typical savings</div>
<div class="cellDivHeader">Improved SAP</div>
<div class="cellDivHeader">Improved EI</div>
<div class="cellDivHeader">Indicative cost</div>
<div class="cellDivHeader">Include</div>
<div class="cellDivHeader lastCell">Removal Reason</div>
</div>
<div class="rowDiv">
<div class="cellDiv">Room-in-roof-insulation</div>
<div class="cellDiv">93.0</div>
<div class="cellDiv">F : 29</div>
<div class="cellDiv">B : 89</div>
<div class="cellDiv">£1,500 - £2,700</div>
<div class="cellDiv">Checkbox</div>
<div class="cellDiv lastCell">Textbox</div>
</div>
</div>
CSS:
.containerDiv {
border: 1px solid #3697f6;
width: 100%;
}
.rowDivHeader {
border: 1px solid #668db6;
background-color: #336799;
color: white;
font-weight: bold;
}
.rowDiv {
border: 1px solid #668db6;
background-color: #cee6fe;
}
.cellDivHeader {
border-right: 1px solid white;
display: table-cell;
width:12%;
padding: 1px;
text-align: center;
}
.cellDiv {
border-right: 2px solid white;
display: table-cell;
width:10%;
padding-right: 4px;
text-align: center;
border-bottom: none;
}
.lastCell {
border-right: none;
}
sample image

Add display:table-row to the row div i.e .rowDivHeader & .rowDiv
& display:table to the main div .containerDiv
.containerDiv {
border: 1px solid #3697f6;
width: 100%; display:table
}
.rowDivHeader {
border: 1px solid #668db6;
background-color: #336799;
color: white;
font-weight: bold; display:table-row
}
.rowDiv {
border: 1px solid #668db6;
background-color: #cee6fe;
display:table-row
}
DEMO

Related

HTML/CSS: Can't figure out how to get a divider in a box

I'm very new at this, so sorry if my code is a little messy. I'm trying to create a job search page where the results will show a bar like this:
I've kinda got it, except I can't get that divider in between the PREV, 1 to 100, and NEXT. Mine looks like this:
Here's my code:
HTML:
<div class="results">
<a href="https://gregslist--farahgus10.repl.co/">Prev<a/>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/>
<a href="https://gregslist--farahgus10.repl.co/" >Next<a/>
</div>
CSS:
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
padding: 5px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
I've tried making a results class for every link, but then I end up getting one big box and 3 little boxes around each link.
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
display:flex;
}
.results a {
color:#000;
text-decoration:none;
font-family:sans-serif;
}
.a, .c {
flex:1;
padding: 5px 0px;
text-align:center;
}
.b {
flex:2;
padding: 5px 0px;
text-align:center;
border-right:1px solid lightgray;
border-left:1px solid lightgray;
}
<div class="results">
<div class="a"><a href="https://gregslist--farahgus10.repl.co/">< Prev<a/></div>
<div class="b"> <a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/></div>
<div class="c"> <a href="https://gregslist--farahgus10.repl.co/" >Next ><a/></div>
</div>
Maybe put this in very simple table. I think it should be good enough solution for your need.
Something like this JSFiddle
<table>
<tr>
<td>
Prev
</td>
<td>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 17</a>
</td>
<td>
<a href="https://gregslist--farahgus10.repl.co/" >Next</a>
</td>
</tr>
</table>
With CSS with base like this
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
padding: 5px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid gray;
}
Your case is simple enough, don't no fancy flexbox or anything.
.results {
color: black;
border: 1px solid lightgrey;
/* width: 300px; removed */
display: inline-block; /* Added */
/* padding:5px; moved to the children (<a>) */
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
/* Added */
a {
display: inline-block;
padding: 5px;
text-decoration: none;
}
/* giving the second child left and right border to mimic dividers */
.results>a:nth-child(2) {
border-right: 1px solid lightgrey;
border-left: 1px solid lightgrey;
}
<div class="results">
Prev
1 to 100 of 179
Next
</div>
Your closing tags on the <a> links are wrong. They should look like </a> with the slash before the a. Once you update those, you can place the <a> links into individual divs:
HTML:
<div id="container">
<div>Prev</div>
<div>1 to 100 of 179</div>
<div>Next</div>
</div>
CSS:
div {
float: left;
}
#container {
border: 1px solid lightgrey;
}
#container div {
padding: 8px 24px;
border-right: 1px solid lightgrey;
}
#container div:last-child {
border-right: none;
}
There are many factors that are needed:
Your elements were badly closed
You need to be more specific to what elements you should apply the CSS
These are just the most notable, you need more CSS information. Much success.
.results {
display: flex;
width: 100%;
padding: 5px;
}
.results a {
max-width: 300px;
min-width: 150px;
color: black;
text-decoration: none;
border: 1px solid lightgrey;
padding: 8px;
text-align: center;
}
<div class="results">
Prev
<a href="#" >1 to 100 of 179</a>
<a href="#" >Next</a>
</div>
<div class="results">
<a href="https://gregslist--farahgus10.repl.co/">Prev<a/>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/>
<a href="https://gregslist--farahgus10.repl.co/" >Next<a/>
</div>

Edit Spaces Between Elements

I have a pill / tab navigation menu, and I need to connect the menu to the rest of the body and the underline of the divs in order to make the menu look nice.
I need to color the space between the black and yellow and connect the underlined divs
.tab {
display: inline-block;
text-align: center;
border-bottom: 1px solid white;
width: 75px;
}
.selected {
border: 1px solid white;
border-bottom: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: rgba(0,0,0,1);
}
.createScreen {
display: block;
background-color: yellow;
width: 985px;
height: 500px;
}
.personalContainer {
margin-left: 5px;
}
.personalContainer, .shippingContainer, .billingContainer, .cardContainer {
margin-top: 5px;
display: inline-block;
background-color: rgba(0,0,0,0.25);
height: 400px;
width: 240px;
}
<div class="billingNav">
<div id="#createTab" class="tab selected">Create</div>
<div id="#editTab" class="tab notSelected">Edit</div>
<div id="#deleteTab" class="tab notSelected">Delete</div>
</div>
<div class="createScreen show">
<div class="personalContainer">
</div>
<div class="shippingContainer">
</div>
<div class="billingContainer">
</div>
<div class="cardContainer">
</div>
</div>
<div class="editScreen">
</div>
<div class="deleteScreen">
</div>
If you meant to the small gap between your selected tab and the menu, you can't make its border-bottom: none;.
Instead, I suggest you just override the tab preferences, so the bottom-border of the selected tab is black:
.selected {
border: 1px solid white;
border-bottom: 1px solid black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: rgba(0,0,0,1);
}
This might get you closer to the result you need , before replacing these codes pls remove .selected from css.
.billingNav {
padding: 5px;
background-color: #444;
}
.tab {
display: inline-block;
margin-bottom: 5px;
text-align: center;
width: 75px;
color: #fff;
}
.tab:hover {
border-bottom: 2px solid #fff;
}
To connect the tabs together (no gap between tabs) you can see this question. there are several methods like as remove the whitespace in the HTML between the inline-block elements (no new line between of prev item and of next item). You may also use negative letter-spacing for parent and reset it to normal on cild (tab) elements.
The small white gap below the menu items are produced by the .tab {... border-bottom: 1px solid white;} style you set for tabs but border-bottom: none; on selected tab. to remove that space simply remove the border-bottom from tab.
Here is a working sample:
.billingNav {letter-spacing: -1em;}
.tab {
display: inline-block;
text-align: center;
letter-spacing: normal;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 75px;
/*border-right: 1px solid white;
background-color: rgba(200,200,200,1);*/
}
.selected {
/*border: 1px solid white;*/
/*border-bottom: none;*/
background-color: rgba(0,0,0,1);
color: white;
}
.createScreen {
display: block;
background-color: yellow;
width: 985px;
height: 500px;
}
.personalContainer {
margin-left: 5px;
}
.personalContainer, .shippingContainer, .billingContainer, .cardContainer {
margin-top: 5px;
display: inline-block;
background-color: rgba(0,0,0,0.25);
height: 400px;
width: 240px;
}
<div class="billingNav">
<div id="#createTab" class="tab selected">Create</div>
<div id="#editTab" class="tab notSelected">Edit</div>
<div id="#deleteTab" class="tab notSelected">Delete</div>
</div>
<div class="createScreen show">
<div class="personalContainer">
</div>
<div class="shippingContainer">
</div>
<div class="billingContainer">
</div>
<div class="cardContainer">
</div>
</div>
<div class="editScreen">
</div>
<div class="deleteScreen">
</div>
Another appearance could be achieved by adding a background and small right border to (non-selected) tabs:
.billingNav {letter-spacing: -1em;}
.tab {
display: inline-block;
text-align: center;
letter-spacing: normal;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 75px;
border-right: 1px solid white;
background-color: rgba(200,200,200,1);
}
.selected {
/*border: 1px solid white;*/
/*border-bottom: none;*/
background-color: rgba(0,0,0,1);
color: white;
}
.createScreen {
display: block;
background-color: yellow;
width: 985px;
height: 500px;
}
.personalContainer {
margin-left: 5px;
}
.personalContainer, .shippingContainer, .billingContainer, .cardContainer {
margin-top: 5px;
display: inline-block;
background-color: rgba(0,0,0,0.25);
height: 400px;
width: 240px;
}
<div class="billingNav">
<div id="#createTab" class="tab selected">Create</div>
<div id="#editTab" class="tab notSelected">Edit</div>
<div id="#deleteTab" class="tab notSelected">Delete</div>
</div>
<div class="createScreen show">
<div class="personalContainer">
</div>
<div class="shippingContainer">
</div>
<div class="billingContainer">
</div>
<div class="cardContainer">
</div>
</div>
<div class="editScreen">
</div>
<div class="deleteScreen">
</div>
Getting rid of the whitespace in between the underlined elements connected their borders
<div id="#createTab" class="tab selected">Create</div><div
id="#editTab" class="tab notSelected">Edit</div><div id="#deleteTab"
class="tab notSelected">Delete</div>
I personally would adjust the vertical-align so that the tabs do not have a gap in-between the values they already have a parent div container so the css would be
.tabSelected {
vertical-align: -4px; // or however many you need so that there is no gap

Html table like structure without table

I am trying to create 2 column table like structure without using <table> , Here in 2nd column , When the text overflows I want it to stay on the right side.Here is my code so far - https://jsfiddle.net/a49vuup1/
<div class="mainbox">
<span class="leftbox"> STATE </span> : <span class="rightbox">TAMILNADU TAMILNADU TAMILNADU TAMILNADU</span>
<div class="myhr"></div>
<span class="leftbox"> Phone </span> : <span class="rightbox">Landline</span>
</div>
and my css
.mainbox {
max-width: 300px;
margin: auto;
border: 1px solid #454242;
margin-top: 30px;
}
hr {
border-top: 3px solid rgba(44, 44, 44, 0.69);
}
.leftbox {
border-right: 1px solid #303925;
font-size: 20px;
padding: 5px;
min-width: 150px;
display: inline-block;
}
.myhr {
border-bottom: 1px solid #293A42;
}
.rightbox {
font-size: 16px;
min-width: 150px;
}
You could use display: table for this
example:
<div class="table">
<div class="table-row">
<div class="cell">
text 1
</div>
<div class="cell">
text 2
</div>
</div>
<div class="table-row">
<div class="cell">
text 3
</div>
<div class="cell">
text 4
</div>
</div>
</div>
css:
.table {
display: table;
table-layout: fixed;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid black;
}
https://jsfiddle.net/41vpjpuy/
I wasn't sure what the <hr> and .myhr was for so I guessed that it was to span both columns. I used display: table-cell for .leftbox and .rightbox and made the .mainbox display: table of course and added table-layout: fixed so your lengths can make more sense.
Reference
Fiddle
Snippet
.mainbox {
max-width: 300px;
margin: auto;
border: 1px solid #454242;
margin-top: 30px;
display: table;
table-layout: fixed;
border-spacing: 3px;
border-collapse: separate;
}
hr {
border-top: 3px solid rgba(44, 44, 44, 1);
width: 200%;
}
.leftbox {
border-right: 1px solid #303925;
font-size: 20px;
padding: 5px;
min-width: 150px;
display: table-cell;
}
.myhr {
border-bottom: 2px solid #000;
display: table-row;
width: 200%;
min-height: 30px;
padding: 5px;
}
.rightbox {
font-size: 16px;
min-width: 150px;
display: table-cell;
}
<div class="mainbox">
<span class="leftbox"> STATE </span> : <span class="rightbox">TAMILNADU TAMILNADU TAMILNADU TAMILNADU</span>
<div class="myhr">
<hr/>
</div>
<span class="leftbox"> Phone </span> : <span class="rightbox">Landline</span>
</div>
Additionally, try this also. I eddited your css and html
<div class="mainbox">
<div class="row">
<span class="leftbox">State</span>: <span class="rightbox">TAMILNADU TAMILNADUTAMILNADU TAMILNADU</span>
</div>
<div class="row">
<span class="leftbox">Phone</span>: <span class="rightbox">landline</span>
</div>
</div>
CSS:
.mainbox {
max-width: 300px;
margin: auto;
border: 1px solid #454242;
margin-top: 30px;
display: table;
}
.row {
display:table-row;
}
{
border-top: 3px solid rgba(44, 44, 44, 0.69);
}
.leftbox {
border-right: 1px solid #303925;
font-size: 20px;
padding: 5px;
min-width: 150px;
word-wrap: break-word;
display: table-cell;
width:25%;
}
.myhr
{
border-bottom: 1px solid #293A42;
}
.rightbox {
/* word-wrap: break-word; */
font-size: 16px;
min-width: 150px;
display:table-cell;
}

Div Misalignment Inside of table

I'm having some issues with lining up similarly sized divs inside a td Chrome inspector confirms pixel size is the same. Trying to do a scheduler demo. Any ideas how to fix the alignment issue would be great! thanks!
I'll admit the small picture doesn't look like much, but it's there and over the length of 24 hours, it's certainly looks off.
I've played with inspector for the last hour, but just can't find it!
My Html code snippet...
<table>
<tbody>
<tr>
<td class="text-right ">
<div class="time_label">6am</div>
<div class="time_label">7am</div>
<div class="time_label">8am</div>
<div class="time_label">9am</div>
<div class="time_label">10am</div>
<div class="time_label">11am</div>
<div class="time_label">12pm</div>
<div class="time_label">1pm</div>
<div class="time_label">2pm</div>
<div class="time_label">3pm</div>
<div class="time_label">4pm</div>
<div class="time_label">5pm</div>
<div class="time_label">6pm</div>
<div class="time_label">7pm</div>
<div class="time_label">8pm</div>
<div class="time_label">9pm</div>
</td>
<td class="area area1">
<div class="block block1"></div>
<div class="block block2"></div>
My Sass snippet, this is inside of a bootstrap row/col-md-12...
$booker-container-height: 618px;
$booker-table-margin: 10px;
$booker-height: $booker-container-height - $booker-table-margin;
.booker_wrapper {
box-shadow: 0 0 12px #888;
}
.booker {
table {
margin: $booker-table-margin;
height: $booker-height;
table-layout: fixed;
width: 100%;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
.time_label {
height: $booker-height/16;
border-top: 1px solid #DDD;
border-left: 1px solid #DDD;
}
.block {
height: $booker-height/32;
border-left: 1px solid #DDD;
}
.area:last-child{
border-right: 1px solid #DDD;
}
.area>.block:first-child
{
border-top: 1px solid #DDD;
}
.area>.block:nth-child(even)
{
border-bottom: 1px solid #DDD;
}
.area>.block:nth-child(odd)
{
border-bottom: 1px solid #DDD;
}
}
You should used the amazing css property box-sizing: border-box; supporting by IE8 to! Then set the height's items of left column at the double of the right and an border-bottom for each, like:
html:
<table>
<tr>
<th>
<div>Hello</div>
<div>Heros</div>
</th>
<td>
<div>World</div>
<div>Toto</div>
<div>Batman</div>
<div>Superman</div>
</td>
</tr>
</table>
scss:
* {
#include box-sizing(border-box);
}
$dark: #202020;
table {
border: 1px solid $dark;
border-bottom: 0;
}
th {
div {
height: 60px;
border-bottom: 1px solid $dark;
border-right: 1px solid $dark;
}
}
td {
div {
height: 30px;
border-bottom: 1px solid $dark;
}
}
I made a codepen here: http://codepen.io/pik_at/pen/qEKKBy

Footer elements vertical align

I'm trying to make this footer, where every element is vertically aligned. But for some reason, copyright for example isn't vertically aligned.
Can anyone help me finding out what is wrong? Or what I am missing?
Footer HTML:
<div id="footerSocial">
<div id="socialNetwork">
Connect with us
<img src="/www/assets/newImages/footer/facebook.png">
<img src="/www/assets/newImages/footer/twitter.png">
<img src="/www/assets/newImages/footer/google plus.png">
<img src="/www/assets/newImages/footer/pinterest.png">
<img src="/www/assets/newImages/footer/tumblr.png">
</div>
<div id="footerNewsletter">
Subscribe to Newsletter
<input id="subscribeNewsletter" name="email" type="text">
<input id="subscribe_ok" type="image" src="/www/assets/newImages/footer/Ok.png" onclick="saveNewsletter(this);">
</div>
<div id="copyright">
Copyright 2013 - Dreaming Different
</div>
</div>
Footer CSS:
#footerSocial {
display: inline-block;
text-align: center;
width: 100%;
margin-top: -25px;
}
#socialNetwork {
display: inline-block;
float: left;
font-size: 10px;
color: #747474;
}
#footerNewsletter {
display: inline-block;
margin: 0 auto;
font-size: 10px;
color: #747474;
}
#footerNewsletter #subscribe_ok {
margin-bottom: -5px;
}
#copyright {
display: inline-block;
float: right;
font-size: 10px;
color: #747474;
}
#footerSocial {
border: 1px solid black;
}
#socialNetwork {
border: 1px solid green;
}
#footerNewsletter {
border: 1px solid red;
}
#copyright {
border: 1px solid blue;
}
Fiddle Demo
You can use a table layout to achieve what you want :
#footerSocial { display: table; text-align: center; width: 100%; font-size: 10px;color: #747474;}
#footerSocial > div {display: table-cell; }
#footerNewsletter #subscribe_ok { margin-bottom: -5px; }
#footerSocial { border: 1px solid black; }
#socialNetwork { border: 1px solid green; }
#footerNewsletter { border: 1px solid red; }
#copyright { border: 1px solid blue; }
Example