I keep getting blank lines between my table - html

Once the table starts getting filled it keeps giving me these blank lines on the table.
I am using a w3schools template but I don't think that's whats causing the problem. I put an image below of an example of what it would look like once the table gets filled in.
I tried different things with CSS but nothing worked and I can't find any post with similar problems, please help.
<!DOCTYPE html>
<html>
<title>CaBar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<head>
<style>
body,
html {
height: 100%;
font-family: "Inconsolata", sans-serif;
}
.bgimg {
background-position: center;
background-size: cover;
background-image: url("images/coffee1.jpg");
min-height: 75%;
}
.menu {
display: none;
}
</style>
<style>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
height: 50px;
position: relative;
top: 40px;
}
</style>
</head>
<body>
<div class="w3-top">
<div class="w3-row w3-padding w3-black">
<div class="w3-col s3">
INVENTORY
</div>
<div class="w3-col s3">
PROFITS
</div>
<div class="w3-col s3">
ORDER
</div>
<div class="w3-col s3">
LOGOUT
</div>
</div>
</div>
<table align='center'>
<tr>
<th>ID</th>
<th>NAME</th>
<th>STOCK</th>
<th>COST</th>
<th>PRICE</th>
</tr>
</body>
</html>


Try removing top: 40px; from your css...
I also added a margin-top to the table since it got hidden behind the navigation which uses position:fixed
snippet below:
body,
html {
height: 100%;
font-family: "Inconsolata", sans-serif;
}
.bgimg {
background-position: center;
background-size: cover;
background-image: url("images/coffee1.jpg");
min-height: 75%;
}
.menu {
display: none;
}
table {
margin-top: 70px;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
height: 50px;
position: relative;
/* top: 40px; */
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<body>
<div class="w3-top">
<div class="w3-row w3-padding w3-black">
<div class="w3-col s3">
INVENTORY
</div>
<div class="w3-col s3">
PROFITS
</div>
<div class="w3-col s3">
ORDER
</div>
<div class="w3-col s3">
LOGOUT
</div>
</div>
</div>
<table align='center'>
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>STOCK</th>
<th>COST</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
</tbody>
</table>
</body>

Related

try to align images right next to a sidebar

this the image I'm trying to recreate
I'm trying to place the two(2) stacked images right next to each other and also make the whole three(3) images to also align right next to the sidebar tables like in the above image, but each time I try it always goes below the sidebar table. I have tried using flexbox but it doesn't work maybe I don't know it very much. please if anyone can help. Thank you
<div class="table">
<table>
<tr>
<th class="cat">Categories</th>
</tr>
<tr>
<th>Electronics</th>
</tr>
<tr>
<th>Clothing</th>
</tr>
<tr>
<th>Music & Equipment</th>
</tr>
<tr>
<th>Footwear</th>
</tr>
<tr>
<th>Software Products</th>
</tr>
<tr>
<th>Computer Hardware</th>
</tr>
<tr>
<th>Mobile Phones</th>
</tr>
<tr>
<th>Laptops</th>
</tr>
<tr>
<th>Furniture</th>
</tr>
<tr>
<th>Beauty Products</th>
</tr>
<tr>
<th>Computer Accessories</th>
</tr>
</table>
</div>
<div class="holder">
<div class="lone-image"> </div>
<div class="stacked-image">
<div class="canon"></div>
<div class="dell"></div>
</div>
</div>
CSS Code
.table {
display: flex;
flex - flow: column;
border: 1px solid #999696;
width: 25%;
height: 60%;
box-sizing: border-box;
}
table, th, td{
border-bottom:1px solid black;
text-align: left;
padding: 10px;
}
.cat{
background-color:rgb(0, 0, 107);
color: white;
border-radius: 4px;
}
.holder{
display: flex;
justify-content: center;
align-items: center;
}
.lone-image{
background-image: url(xii.jpg);
background-size: cover;
width: 35%;
height: 410px;
}
.stacked-image{
display: flex;
flex-direction: column;
height: 400px;
width: 40%;
margin: 4px;
}
.canon{
background-size: cover;
background-image: url(canon.jpg);
width: 65%;
height: 400px;
margin-bottom: 4px;
}
.dell{
background-size: cover;
background-image: url(dell.jpg);
width: 65%;
height: 400px;
}

I came up with this.
You can play around with width's and other styling but this should give you the basic idea.
Also, using tables is a bad practice as they offer no responsiveness.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<table>
<tr>
<td>
<div id="1table">
<table border="1">
<tr>
<th class="cat">Categories</th>
</tr>
<tr>
<th>Electronics</th>
</tr>
<tr>
<th>Clothing</th>
</tr>
<tr>
<th>Music & Equipment</th>
</tr>
<tr>
<th>Footwear</th>
</tr>
<tr>
<th>Software Products</th>
</tr>
<tr>
<th>Computer Hardware</th>
</tr>
<tr>
<th>Mobile Phones</th>
</tr>
<tr>
<th>Laptops</th>
</tr>
<tr>
<th>Furniture</th>
</tr>
<tr>
<th>Beauty Products</th>
</tr>
<tr>
<th>Computer Accessories</th>
</tr>
</table>
</div>
</td>
<td>
<table>
<tr>
<td rowspan="2"><img src="https://i.imgur.com/JeXUv8x.png" style="height:290px"></td>
<td colspan="2"><img src="https://i.imgur.com/4girMKd.png" style="height:140px"></td>
</tr>
<tr>
<td><img src="https://i.imgur.com/4girMKd.png" style="height:140px"></td>
</tr>
<tr>
</tr>
</table>
</td>
</tr>
</table>
<div class="holder">
<div class="lone-image"> </div>
<div class="stacked-image">
<div class="canon"></div>
<div class="dell"></div>
</div>
</div>
</body>
</html>
Have a great day!

I think their was some error in your width & height selection for each div. I changed that and removed a little bit of extra flex properties and thats it Just tell me you want something like this.
Proposed code
.container{
display:flex;
width:100%;
height:60%;
}
.table{
display: flex;
flex-flow: column;
border: 1px solid #999696;
width: 25%;
height: 100%;
box-sizing: border-box;
}
table, th, td{
border-bottom:1px solid black;
text-align: left;
padding: 10px;
}
.cat{
background-color:rgb(0, 0, 107);
color: white;
border-radius: 4px;
}
.holder{
width:100%;
display: flex;
flex-direction:row;
}
.lone-image{
background:blue;
width:60%;
height: 100%;
}
.stacked-image{
display: flex;
flex-direction: column;
height: 100%;
width: 40%;
}
.canon{
width: 100%;
background:green;
height:50%;
}
.dell{
background:red;
width: 100%;
height: 50%;
}
<div class="container">
<div class="table">
<table>
<tr>
<th class="cat"> Categories</th>
</tr>
<tr>
<th> Electronics</th>
</tr>
<tr>
<th>Clothing</th>
</tr>
<tr>
<th> Music & Equipment</th>
</tr>
<tr>
<th> Footwear</th>
</tr>
<tr>
<th> Software Products</th>
</tr>
<tr>
<th> Computer Hardware</th>
</tr>
<tr>
<th> Mobile Phones</th>
</tr>
<tr>
<th> Laptops</th>
</tr>
<tr>
<th> Furniture</th>
</tr>
<tr>
<th> Beauty Products</th>
</tr>
<tr>
<th> Computer Accessories</th>
</tr>
</table>
</div>
<div class="holder">
<div class="lone-image">
</div>
<div class="stacked-image">
<div class="canon"></div>
<div class="dell"></div>
</div>
</div>
</div>
You were heading in the right direction I know flexboxes are really cool but they do take a little while to hang on.
Do tell me whether I was of any Help :)

Bootstrap Responsive Tables Break Vertically

I have the following html with a responsive table.
When the page is accessed via mobile, the user has to scroll horizontally to view the entire content, is there a bootstrap way to break the columns vertically so a mobile user does not have to scroll horizontally ?
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>
<div class="container"> <h2>Table</h2> <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p> <div class="table-responsive"> <table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody> </table> </div> </div>
</body> </html>
The last example here (No More Tables) shows the desired behavior perfectly https://elvery.net/demo/responsive-tables/
though it is not done with bootstrap.
If anyone can shed light on how to achieve this with bootstrap, ill appreciate.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>
<style>
.table-responsive{
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
</style>
<div class="container"> <h2>Table</h2> <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p> <div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody> </table> </div> </div>
</body> </html>
no need to do anything only put css as i putted on style tag that work perfectly
i hope this work good.
thanks.

Use this way
#media screen and (max-width: 640px) {
table#customDataTable caption {
background-image: none;
}
table#customDataTable thead {
display: none;
}
table#customDataTable tbody td {
display: block;
padding: .6rem;
}
table#customDataTable tbody tr td:first-child {
background: #666;
color: #fff;
}
table#customDataTable tbody tr td:first-child a {
color: #fff;
}
table#customDataTable tbody tr td:first-child:before {
color: rgb(225, 181, 71);
}
table#customDataTable tbody td:before {
content: attr(data-th);
font-weight: bold;
display: inline-block;
width: 10rem;
}
table#customDataTable tr th:last-child,
table#customDataTable tr td:last-child {
max-width: 100% !important;
min-width: 100px !important;
width: 100% !important;
}
}
<table class="table" id="customDataTable">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/lalji1051/ztrjqvL8/

An alternative solution is to use Bootstrap.
HTML:
<div class="col-md-1 " style="padding-top:10%">
<div class="row">
<div class="col-md-2 offset-lg-1 col-sm-12 text-center feature-comparison-table-header-cell bold">
Compare Editions
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
Lite
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
Standard
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
Premium
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
Professional
</div>
</div>
<div class="row">
<div class="col-md-2 offset-lg-1 col-sm-12 text-center feature-comparison-table-header-cell">
Monthly Flat Rate
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
<p>Free</p>
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
<p>
$40/Month
</p>
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
<p>
$50/Month
</p>
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
<p>
$60/Month
</p>
</div>
</div>
</div>
The key is then just stylizing it to look like a table
#pricing-detailed-section .feature-comparison-table-header-cell {
padding: 15px;
border: 1px solid #DFE1E5;
font-size: 1rem;
padding-top: 40px;
height:100px;
}
#pricing-detailed-section .bold {
font-weight:600;
}
#pricing-detailed-section .feature-comparison-table-cell {
height: 100px;
border: 1px solid
#DFE1E5;
background-color:#FFF;
display: table;
}
#pricing-detailed-section .feature-comparison-table-cell p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
When you switch to mobile, it'll fit everything vertically. Note the code for the paragraph section solves multi-line fields not being centered.

How to declare height based on screen with design system?

I found the Column Nesting of Grid so that I can make a view following:
(Resource: https://www.lightningdesignsystem.com/utilities/grid/#Column-Nesting)
enter image description here
But I have a problem.
When I set the unit of height as "px", I can apply height on div. And columns and rows of table are applied with unit of height as "percentage"
On the other hands, when I set the unit of height as "percentage", I can't apply height with unit of height as "percentage" on div, columns, rows, and table!
I want to create a screen-based responsive visualforce page.
How can I apply height in "percentage"?
My code is following:
<apex:page showHeader="false" standardStylesheets="false"
sidebar="false" applyHtmlTag="false" applyBodyTag="false"
docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Condition of Operating Room of Mods Clinic</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Import the Design System style sheet -->
<apex:slds />
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.operating {
height: 750px;
background-color: blue;
}
.logoAndExplaination {
height: 150px;
background-color: green;
}
.nonOperating {
height: 600px;
background-color: orange;
}
.waiting{
margin-top: 0;
margin-bottom: 0;
height: 300px;
background-color: fuchsia;
}
.end {
margin-top: 0;
height: 300px;
background-color: silver;
}
table {
border-collapse: collapse;
margin: 2.5px;
}
th {
border: 1px solid black;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds-scope">
<!-- PRIMARY CONTENT WRAPPER -->
<div class="slds-grid slds-wrap">
<div class="operating slds-col slds-size_2-of-3">
<table style="width: 99%; height: 99%;">
<colgroup>
<col width="25%" />
<col width="25%" />
<col width="25%" />
<col width="" />
</colgroup>
<tr style="height: 5%;">
<th>501호</th>
<th>502호</th>
<th>503호</th>
<th>504호</th>
</tr>
<tr style="height: 28.3%;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 5%;">
<th>101호</th>
<th>102호</th>
<th>103호</th>
<th>104호</th>
</tr>
<tr style="height: 28.3%;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 5%;">
<th>수술실 1</th>
<th>수술실 2</th>
<th>수술실 3</th>
<th>레이저실(107호)</th>
</tr>
<tr style="height: 28.3%;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="slds-col slds-size_1-of-3">
<div class="slds-grid slds-wrap">
<div class="logoAndExplaination slds-col slds-size_1-of-1" align="center">
<img alt="Image"
src=""
style="width: 90%;" />
<h1 style="color: white; margin: 0; padding: 0; margin-bottom: 5px">상 황 판</h1>
</div>
<div class="nonOperating slds-col slds-size_3-of-4">
<table style="width: 99%; height: 98%;">
<colgroup>
<col width="33%" />
<col width="33%" />
<col width="" />
</colgroup>
<tr style="height: 7.5%;">
<th>메디짐 운동실</th>
<th>메디짐 치료실</th>
<th>회복실1(105호)</th>
</tr>
<tr style="height: 25.83%;">
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 7.5%;">
<th>상담실1</th>
<th>상담실2</th>
<th>회복실2(107호)</th>
</tr>
<tr style="height: 25.83%;">
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 7.5%;">
<th>상담실3</th>
<th>상담실4</th>
<th>미팅룸</th>
</tr>
<tr style="height: 25.83%;">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="slds-col slds-size_1-of-4">
<div class="waiting slds-col slds-size_1-of-1">
<table style="width: 98%; height: 99%;">
<tr style="height: 15%;">
<th>대기자</th>
</tr>
<tr style="height: 85%;">
<td></td>
</tr>
</table>
</div>
<div class="end slds-col slds-size_1-of-1">
<table style="width: 98%; height: 96%;">
<tr style="height: 15%;">
<th>시술마침</th>
</tr>
<tr style="height: 85%;">
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
<!-- JAVASCRIPT -->
<!-- / JAVASCRIPT -->
</body>
</html>
</apex:page>

/************** ipad rotate ***************/
#media (max-width: 1080px) {}
/************** ipad ***************/
#media only screen and (min-width:768px) and (max-width: 1024px) and (orientation : portrait){}
/************** iphone rotate***************/
#media (max-width: 767px) {}
/************** iphone ***************/
#media (max-width: 479px) {}
You have to style based on device width by using above condition, if you still have doubt on styling let me know....Thank you

how to set a table header and table data in html

I am not able to set the table as same as the header. please help and thanks in advance.
code and image are below.enter image description here
<!-- This is the table Style-->
<style>
table {
width:100%;
}
th, td {
width: 100%;
border: 3px solid black;
border-collapse: collapse;
}
th, td {
width: 100%;
padding: 13px;
text-align: left;
}
table#t01 th {
width: 100%;
background-color: orange;
color: black;
font-size: 20px;
position: relative;
}
</style>
//this is the HTML code
<div>
<table id="t01">
<tr class="header">
<th>Name</th>
<th>Download</th>
</tr>
<tr class="data_table"></tr>
</table>
</div>

Your html is wrong, use :
<table>
<thead>
<tr class='header'>
<th>Name</th>
<th>Download</th>
</tr>
<thead>
<tbody>
<tr class='data_table'>
</tr>
</tbody>
</table>

Try Following code.
table {
width:100%;
}
th, td {
width: 100%;
border: 3px solid black;
border-collapse: collapse;
}
th, td {
width: 100%;
padding: 13px;
text-align: left;
}
table#t01 th {
width: 100%;
background-color: orange;
color: black;
font-size: 20px;
position: relative;
}
<table id="t01">
<tr class="header">
<th colspan="2">Name</th>
<th>Download</th>
</tr>
<tr class="data-table">
<td>Mp3</td>
<td>Download</td>
</tr>
<tr class="data-table">
<td>File</td>
<td>Download</td>
</tr>
</table>

You can use the Bootstrap framework. You may get almost everything for web designing :
Visit
getbootstrap
Example of a Bootstrap table.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

How can I get the quadrants on my page to vertically stretch to match the height of their horizontal neighbor?

I want four equi-sized quadrants on my page - all should be the same width and height, with some space between them.
What I'm getting as of now is this:
What I want is that the top right quadrant ("Pricing Exceptions") stretch vertically, as if being pulled toward the bottom, so that its bottom border lines up horizontally with the top left ("Top 10 Items Purchased") quadrant.
I want similar for the two bottom quadrants, namely that the "Forecasted Spend" quadrant be "pulled down" or "stretched" so that it aligns horizontally wit the taller "Fill Rate" quadrant.
How can I accomplish that?
My code (this is a mockup - all the html and css are combined in one .html file) is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eServices Customer Dashboard</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Inline CSS (don't tell the CSS-Whisperers I did this!) -->
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: white;
}
label {
font-family: Candara, Calibri, Cambria, Georgia, serif;
}
.body-content {
-webkit-box-shadow: -1px 0 5px 0 #000000;
-webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);
box-shadow: -1px 0 5px 0 #000000;
box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);
padding-left: 1px;
padding-right: 1px;
padding-bottom: 15px;
}
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
color: inherit;
background-color: white;
}
.addltopmargin {
margin-top: 8px;
}
.sectiontext {
font-size: 1.5em;
font-weight: bold;
font-family: Candara, Calibri, Cambria, serif;
color: green;
margin-top: -4px;
}
.bottommarginbreathingroom {
margin-bottom: 4px;
}
.marginaboveandbelow {
margin-top: 15px;
margin-bottom: 15px;
}
.rightjustifytext {
text-align: right;
}
table {
font-family: georgias, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.contents{
height:50%;
width:100%;
}
.redfont {
color: red;
}
.bold {
font-weight: bold;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-wrap: wrap;
}
.container div {
display: inline-block;
width: 50vw;
height: 50vh;
overflow-y: scroll;
}
.topleft {
margin-top: 16px;
margin-left: 16px;
margin-bottom: 16px;
padding: 16px;
border:1px solid black;
}
.topright {
margin-top: 16px;
margin-right: 16px;
margin-bottom: 16px;
margin-left: -12px;
padding: 16px;
border:1px solid black;
}
.bottomleft {
margin-left: 16px;
padding: 16px;
border:1px solid black;
}
.bottomright {
margin-right: 16px;
margin-left: -12px;
padding: 16px;
border:1px solid black;
}
</style>
</head>
<body>
<div class="contents">
<div class="row">
<div class="col-md-6">
<div class="topleft">
<h2 class="sectiontext">Top 10 Items Purchased</h2>
<div>
<input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2">
</input>
<label> to </label>
<input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2">
</input>
</div>
<table>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>Qty</th>
</tr>
<tr>
<td>100250</td>
<td>Artichokes Green Globe 18 Size</td>
<td>9084</td>
</tr>
<tr>
<td>102800</td>
<td>Broccoli Bunched 18 Size</td>
<td>8837</td>
</tr>
<tr>
<td>100050</td>
<td>Anise Fennell 12</td>
<td>6653</td>
</tr>
<tr>
<td>101600</td>
<td>Beans Blue Lake Round Hand Pick</td>
<td>5846</td>
</tr>
<tr>
<td>106000</td>
<td>Carrots Cello 48/1#</td>
<td>4266</td>
</tr>
<tr>
<td>108000</td>
<td>Celery Pascal 12</td>
<td>3774</td>
</tr>
<tr>
<td>105000</td>
<td>Cabbage Green 45-50#</td>
<td>3024</td>
</tr>
<tr>
<td>104000</td>
<td>Brussel Sprouts Cello Cups 12/12 oz</td>
<td>2663</td>
</tr>
<tr>
<td>100450</td>
<td>Asparagus Colossal 11/1#</td>
<td>2624</td>
</tr>
<tr>
<td>102350</td>
<td>Beets With Tops 24</td>
<td>2253</td>
</tr>
</table>
</div>
</div>
<div class="col-md-6">
<div class="topright">
<h2 class="sectiontext">Pricing Exceptions - Weekly Recap</h2>
<label class="redfont">Red denotes Contract Item Overages</label>
</br>
<label>For Weyand on the pricing week of - 7/31/2016</label>
<table>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>Bid Price</th>
<th>Sell Price</th>
<th>Qty</th>
</tr>
<tr>
<td>231083</td>
<td>BERRIES, BLACK DRISC 1/6 OZ</td>
<td>0.00</td>
<td>4.35</td>
<td>1.00</td>
</tr>
<tr>
<td>104150</td>
<td>BRUSSEL SPROUTS, 25#</td>
<td>0.00</td>
<td>36.20</td>
<td>1.00</td>
</tr>
<tr>
<td>261650</td>
<td>LIMES, 200 CT 40#</td>
<td>0.00</td>
<td>18.65</td>
<td>2.00</td>
</tr>
<tr>
<td>140000</td>
<td>MUSHROOMS, BUTTON 10#</td>
<td>0.00</td>
<td>19.95</td>
<td>2.00</td>
</tr>
<tr>
<td>398980</td>
<td>MELONS, CANTALOUPE CHUNKS 2/5#</td>
<td>38.30</td>
<td>35.00</td>
<td>10.00</td>
</tr>
<tr>
<td>398280</td>
<td>MELONS, HONEYDEW CHUNKS 2/5#</td>
<td>37.30</td>
<td>34.50</td>
<td>15.00</td>
</tr>
<tr>
<td>398036</td>
<td>PINEAPPLE, CHUNKS 2/5#</td>
<td>37.70</td>
<td>35.00</td>
<td>10.00</td>
</tr>
<tr>
<td>351135</td>
<td>LETTUCE, SALAD 3-WAY SEP BAG 1/5#</td>
<td>6.46</td>
<td>6.01</td>
<td>2.00</td>
</tr>
<tr>
<td>208110</td>
<td>APPLES, GALA 12 CT</td>
<td>0.00</td>
<td>8.04</td>
<td>1.00</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="bottomleft">
<h2 class="sectiontext">Forecasted Spend</h2>
<table>
<tr>
<th>Item Code</th>
<th>Last Week's Usage</th>
<th>This Week's Price</th>
<th>Forecasted Spend</th>
</tr>
<tr>
<td>261650</td>
<td>49</td>
<td>3.14</td>
<td>153.86</td>
</tr>
<tr>
<td>231083</td>
<td>52</td>
<td>1.25</td>
<td>65.00</td>
</tr>
<tr>
<td>398980</td>
<td>46</td>
<td>4.95</td>
<td>227.70</td>
</tr>
<tr>
<td>351135</td>
<td>40</td>
<td>0.75</td>
<td>30.00</td>
</tr>
<tr>
<td>398036</td>
<td>42</td>
<td>3.00</td>
<td>126.00</td>
</tr>
<tr>
<td>208110</td>
<td>42</td>
<td>2.50</td>
<td>105.00</td>
</tr>
<tr>
<td class="bold">TOTAL</td>
<td class="bold">271</td>
<td class="bold">--</td>
<td class="bold">$707.56</td>
</tr>
</table>
</div>
</div>
<div class="col-md-6">
<div class="bottomright">
<h2 class="sectiontext">Fill Rate</h2>
<table>
<tr>
<th>Company Name</th>
<th>Reason Description</th>
<th>Ordered</th>
<th>Shipped</th>
<th>Rate %</th>
</tr>
<tr>
<td>ABUELOS #A11 - PEORIA</td>
<td>Regular Item, no issues</td>
<td>622</td>
<td>622</td>
<td>100</td>
</tr>
<tr>
<td>ABUELOS #A09 - EAST PLANO</td>
<td>Regular Item, no issues</td>
<td>371</td>
<td>375</td>
<td>101</td>
</tr>
<tr>
<td>ABUELOS #A26 - MYRTLE BEACH</td>
<td>Credit - Product Quality (for credit adjustments only)</td>
<td>19</td>
<td>9</td>
<td>47</td>
</tr>
<tr>
<td>ABUELOS #A38 - LAKELAND</td>
<td>Regular Item, no issues</td>
<td>569</td>
<td>569</td>
<td>100</td>
</tr>
<tr>
<td class="bold">TOTAL</td>
<td></td>
<td class="bold">1581</td>
<td class="bold">1575</td>
<td class="bold">99.6</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

I usually create my own javascript to check each row. I give all divs that should have the same height (in your case the col-md-6 divs) an additional class: match-height (a ripoff of the existing plugin matchHeight.js).
This code will loop through all .row divs and see which .match-height div is the highest. After this is done the code will adjust all those divs to the highest div giving it min-height CSS.
$(window).on("load resize", function equalHeights() {
$('.row').each(function(){
var highestBox = 0;
$(this).find('.match-height').css("min-height", 0);
$(this).find('.match-height').each(function() {
if ($(this).outerHeight() > highestBox) {
highestBox = $(this).outerHeight();
}
});
$(this).find('.match-height').css("min-height", highestBox);
});
});
Example:
<div class="container">
<div class="row">
<div class="col-md-6 match-height">
1st table
</div>
<div class="col-md-6 match-height">
2nd table
</div>
</div>
<div class="row">
<div class="col-md-6 match-height">
3rd table
</div>
<div class="col-md-6 match-height">
4th table
</div>
</div>
</div>
Let me know if this is what you are looking for,

If you aren't creating dynamic sized containers then you can set the height like so:
.topright, .topleft {
height: 400px;
}
This will keep them even.

Took me lot of time and I got this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eServices Customer Dashboard</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Inline CSS (don't tell the CSS-Whisperers I did this!) -->
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: white;
}
label {
font-family: Candara, Calibri, Cambria, Georgia, serif;
}
.body-content {
-webkit-box-shadow: -1px 0 5px 0 #000000;
-webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);
box-shadow: -1px 0 5px 0 #000000;
box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);
padding-left: 1px;
padding-right: 1px;
padding-bottom: 15px;
}
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
color: inherit;
background-color: white;
}
.addltopmargin {
margin-top: 8px;
}
.sectiontext {
font-size: 1.5em;
font-weight: bold;
font-family: Candara, Calibri, Cambria, serif;
color: green;
margin-top: -4px;
}
.bottommarginbreathingroom {
margin-bottom: 4px;
}
.marginaboveandbelow {
margin-top: 15px;
margin-bottom: 15px;
}
.rightjustifytext {
text-align: right;
}
table {
font-family: georgias, sans-serif;
border-collapse: collapse;
width: 100%;
align:center;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.contents{
height:50%;
width:100%;
}
.redfont {
color: red;
}
.bold {
font-weight: bold;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-wrap: wrap;
}
.container div {
display: inline-block;
width: 50vw;
height: 50vh;
overflow-y: scroll;
}
.topleft {
margin-top: 16px;
margin-left: 16px;
margin-bottom: 16px;
margin-right:19px;
padding-top: 16px;
padding-bottom:16px;
border:1px solid black;
height:500px;
}
.topright {
margin-top: 16px;
margin-right: 16px;
margin-left: 15px;
padding-top: 16px;
padding-bottom:16px;
height:500px;
border:1px solid black;
}
.bottomleft {
margin-left: 16px;
margin-top:30px;
margin-right:18px;
padding-top: 16px;
padding-bottom:16px;
border:1px solid black;
height:385px;
}
.bottomright {
margin-right: 16px;
margin-top:30px;
margin-left:15px;
padding-top: 16px;
padding-bottom:16px;
border:1px solid black;
height:385px;
}
#xyz{
}
</style>
</head>
<body>
<div class="contents">
<div class="row">
<div class="col-md-6 col-sm-12 ">
<div class="topleft">
<h2 class="sectiontext">Top 10 Items Purchased</h2>
<div>
<input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2">
</input>
<label> to </label>
<input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2">
</input>
</div>
<table>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>Qty</th>
</tr>
<tr>
<td>100250</td>
<td>Artichokes Green Globe 18 Size</td>
<td>9084</td>
</tr>
<tr>
<td>102800</td>
<td>Broccoli Bunched 18 Size</td>
<td>8837</td>
</tr>
<tr>
<td>100050</td>
<td>Anise Fennell 12</td>
<td>6653</td>
</tr>
<tr>
<td>101600</td>
<td>Beans Blue Lake Round Hand Pick</td>
<td>5846</td>
</tr>
<tr>
<td>106000</td>
<td>Carrots Cello 48/1#</td>
<td>4266</td>
</tr>
<tr>
<td>108000</td>
<td>Celery Pascal 12</td>
<td>3774</td>
</tr>
<tr>
<td>105000</td>
<td>Cabbage Green 45-50#</td>
<td>3024</td>
</tr>
<tr>
<td>104000</td>
<td>Brussel Sprouts Cello Cups 12/12 oz</td>
<td>2663</td>
</tr>
<tr>
<td>100450</td>
<td>Asparagus Colossal 11/1#</td>
<td>2624</td>
</tr>
<tr>
<td>102350</td>
<td>Beets With Tops 24</td>
<td>2253</td>
</tr>
</table>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="topright">
<h2 class="sectiontext">Pricing Exceptions - Weekly Recap</h2>
<label class="redfont">Red denotes Contract Item Overages</label>
</br>
<label>For Weyand on the pricing week of - 7/31/2016</label>
<table>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>Bid Price</th>
<th>Sell Price</th>
<th>Qty</th>
</tr>
<tr>
<td>231083</td>
<td>BERRIES, BLACK DRISC 1/6 OZ</td>
<td>0.00</td>
<td>4.35</td>
<td>1.00</td>
</tr>
<tr>
<td>104150</td>
<td>BRUSSEL SPROUTS, 25#</td>
<td>0.00</td>
<td>36.20</td>
<td>1.00</td>
</tr>
<tr>
<td>261650</td>
<td>LIMES, 200 CT 40#</td>
<td>0.00</td>
<td>18.65</td>
<td>2.00</td>
</tr>
<tr>
<td>140000</td>
<td>MUSHROOMS, BUTTON 10#</td>
<td>0.00</td>
<td>19.95</td>
<td>2.00</td>
</tr>
<tr>
<td>398980</td>
<td>MELONS, CANTALOUPE CHUNKS 2/5#</td>
<td>38.30</td>
<td>35.00</td>
<td>10.00</td>
</tr>
<tr>
<td>398280</td>
<td>MELONS, HONEYDEW CHUNKS 2/5#</td>
<td>37.30</td>
<td>34.50</td>
<td>15.00</td>
</tr>
<tr>
<td>398036</td>
<td>PINEAPPLE, CHUNKS 2/5#</td>
<td>37.70</td>
<td>35.00</td>
<td>10.00</td>
</tr>
<tr>
<td>351135</td>
<td>LETTUCE, SALAD 3-WAY SEP BAG 1/5#</td>
<td>6.46</td>
<td>6.01</td>
<td>2.00</td>
</tr>
<tr>
<td>208110</td>
<td>APPLES, GALA 12 CT</td>
<td>0.00</td>
<td>8.04</td>
<td>1.00</td>
</tr>
</table>
</div>
</div>
<div class="col-md-6 col-sm-12"><br/></div>
<div class="col-md-6 col-sm-12"><br/></div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12" >
<div class="bottomleft" >
<h2 class="sectiontext">Forecasted Spend</h2>
<table>
<tr>
<th>Item Code</th>
<th>Last Week's Usage</th>
<th>This Week's Price</th>
<th>Forecasted Spend</th>
</tr>
<tr>
<td>261650</td>
<td>49</td>
<td>3.14</td>
<td>153.86</td>
</tr>
<tr>
<td>231083</td>
<td>52</td>
<td>1.25</td>
<td>65.00</td>
</tr>
<tr>
<td>398980</td>
<td>46</td>
<td>4.95</td>
<td>227.70</td>
</tr>
<tr>
<td>351135</td>
<td>40</td>
<td>0.75</td>
<td>30.00</td>
</tr>
<tr>
<td>398036</td>
<td>42</td>
<td>3.00</td>
<td>126.00</td>
</tr>
<tr>
<td>208110</td>
<td>42</td>
<td>2.50</td>
<td>105.00</td>
</tr>
<tr>
<td class="bold">TOTAL</td>
<td class="bold">271</td>
<td class="bold">--</td>
<td class="bold">$707.56</td>
</tr>
</table >
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="bottomright">
<h2 class="sectiontext">Fill Rate</h2>
<table>
<tr>
<th>Company Name</th>
<th>Reason Description</th>
<th>Ordered</th>
<th>Shipped</th>
<th>Rate %</th>
</tr>
<tr>
<td>ABUELOS #A11 - PEORIA</td>
<td>Regular Item, no issues</td>
<td>622</td>
<td>622</td>
<td>100</td>
</tr>
<tr>
<td>ABUELOS #A09 - EAST PLANO</td>
<td>Regular Item, no issues</td>
<td>371</td>
<td>375</td>
<td>101</td>
</tr>
<tr>
<td>ABUELOS #A26 - MYRTLE BEACH</td>
<td>Credit - Product Quality (for credit adjustments only)</td>
<td>19</td>
<td>9</td>
<td>47</td>
</tr>
<tr>
<td>ABUELOS #A38 - LAKELAND</td>
<td>Regular Item, no issues</td>
<td>569</td>
<td>569</td>
<td>100</td>
</tr>
<tr>
<td class="bold">TOTAL</td>
<td></td>
<td class="bold">1581</td>
<td class="bold">1575</td>
<td class="bold">99.6</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6"><br/></div>
<div class="col-lg-6"><br/></div>
</div>
</div>
</body>
</html>

Because the height of each container is automatically increased as the content increases. As the four tables have different content, you can set a fixed height to solve the problem.