Printing HTML div and page break issue when using float / position styles - html

See this class:
.divDutySlip {
width: 90mm;
min-height: 120mm;
padding: 2mm;
/*float:left;
position: relative; */
margin: 2mm;
border: 1px solid #000000;
page-break-inside: avoid;
}
I have commented out two styles. Commenting them out causing the content to page-break correct. No "Duty Slip" is split across a page:
Now, if I introduce the float and position styles and try again the page break logic fails. If I try to print landscape then I get slips side by side but they still split on page breaks. This example is with a lot more content and I have blocked out the names:
So how can I fill the page with these slips and prevent splitting over page breaks? At the moment the only way I can do it is by commenting out those styles and limiting to one column of duty slips.
CSS:
body {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-size: 12pt;
text-align: left;
color: #000000;
background-color: #ffffff;
}
.divDutySlip {
width: 90mm;
min-height: 120mm;
padding: 2mm;
/*float:left;
position: relative; */
margin: 2mm;
border: 1px solid #000000;
page-break-inside: avoid;
}
.textTitle {
font-size: 14pt;
font-weight: 700;
}
.textName {
font-size: 12pt;
}
.tableDutySlip {
width: 100%;
border:1px black solid;
border-collapse:collapse;
}
.tableDutySlip td {
border:1px black solid;
}
.cellHeading {
font-weight: 700;
background-color: #808080;
}
.cellDate {
}
.cellAssignments {
}
.columnDate {
width: 25%;
}
.columnAssignments {
width: 75%;
}
#media screen
{
br { display: none; }
}
HTML:
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="SRRSchedule-Duty%20Slips1.css" rel="stylesheet" type="text/css" />
<title>Assignment Duties</title>
</head>
<body>
<div class="divDutySlip">
<h1 class="textTitle">Assignment Duties</h1>
<h2 class="textName">Test1</h2>
<table class="tableDutySlip">
<colgroup>
<col class="columnDate" /><col class="columnAssignments" />
</colgroup>
<tr>
<td class="cellHeading">Date</td>
<td class="cellHeading">Assignments</td>
</tr>
<tr>
<td class="cellDate">Thu, Apr 9</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 12</td>
<td class="cellAssignments">Watchtower Reader</td>
</tr>
<tr>
<td class="cellDate">Thu, Apr 16</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
</table>
</div>
<div class="divDutySlip">
<h1 class="textTitle">Assignment Duties</h1>
<h2 class="textName">Test2</h2>
<table class="tableDutySlip">
<colgroup>
<col class="columnDate" /><col class="columnAssignments" />
</colgroup>
<tr>
<td class="cellHeading">Date</td>
<td class="cellHeading">Assignments</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 12</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 19</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
</table>
</div>
<div class="divDutySlip">
<h1 class="textTitle">Assignment Duties</h1>
<h2 class="textName">test3</h2>
<table class="tableDutySlip">
<colgroup>
<col class="columnDate" /><col class="columnAssignments" />
</colgroup>
<tr>
<td class="cellHeading">Date</td>
<td class="cellHeading">Assignments</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 19</td>
<td class="cellAssignments">Watchtower Reader</td>
</tr>
</table>
</div>
</body>
</html>
Fiddle:
https://jsfiddle.net/e3kradLh/


In case if you would like to have all the dutyslips in one page you can create a wrapper div for all the dutyslips and add display flex style to it.
https://jsfiddle.net/jhbktoya/1/
body {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-size: 12pt;
text-align: left;
color: #000000;
background-color: #ffffff;
}
.wrapper {
display: flex;
}
.divDutySlip {
width: 90mm;
min-height: 120mm;
padding: 2mm;
margin: 2mm;
border: 1px solid #000000;
page-break-inside: avoid;
}
.textTitle {
font-size: 14pt;
font-weight: 700;
}
.textName {
font-size: 12pt;
}
.tableDutySlip {
width: 100%;
border: 1px black solid;
border-collapse: collapse;
}
.tableDutySlip td {
border: 1px black solid;
}
.cellHeading {
font-weight: 700;
background-color: #808080;
}
.cellDate {}
.cellAssignments {}
.columnDate {
width: 25%;
}
.columnAssignments {
width: 75%;
}
#media screen {
br {
display: none;
}
}
<div class='wrapper'>
<div class="divDutySlip">
<h1 class="textTitle">Assignment Duties</h1>
<h2 class="textName">Test1</h2>
<table class="tableDutySlip">
<colgroup>
<col class="columnDate" />
<col class="columnAssignments" />
</colgroup>
<tbody>
<tr>
<td class="cellHeading">Date</td>
<td class="cellHeading">Assignments</td>
</tr>
<tr>
<td class="cellDate">Thu, Apr 9</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 12</td>
<td class="cellAssignments">Watchtower Reader</td>
</tr>
<tr>
<td class="cellDate">Thu, Apr 16</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
</tbody>
</table>
</div>
<div class="divDutySlip">
<h1 class="textTitle">Assignment Duties</h1>
<h2 class="textName">Test2</h2>
<table class="tableDutySlip">
<colgroup>
<col class="columnDate" />
<col class="columnAssignments" />
</colgroup>
<tbody>
<tr>
<td class="cellHeading">Date</td>
<td class="cellHeading">Assignments</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 12</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 19</td>
<td class="cellAssignments">Mic Left, Mic Right</td>
</tr>
</tbody>
</table>
</div>
<div class="divDutySlip">
<h1 class="textTitle">Assignment Duties</h1>
<h2 class="textName">test3</h2>
<table class="tableDutySlip">
<colgroup>
<col class="columnDate" />
<col class="columnAssignments" />
</colgroup>
<tbody>
<tr>
<td class="cellHeading">Date</td>
<td class="cellHeading">Assignments</td>
</tr>
<tr>
<td class="cellDate">Sun, Apr 19</td>
<td class="cellAssignments">Watchtower Reader</td>
</tr>
</tbody>
</table>
</div>
</div>

Related

Correctly positioning a QR code image in an HTML invoice template

"I am working on creating an HTML template for an invoice and am having some difficulty placing the QR code image in the correct location. Specifically, I want the QR code image to appear directly under the invoice information table, but it is not appearing in the desired location.
table {
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 10px auto;
font-size: 14px;
color: #1e2b40;
}
td,
th {
border: 1px solid gray;
padding: 6px;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.bold {
font-weight: bold;
}
.contact-info {
font-family: Arial, sans-serif;
font-size: 12px;
float: right;
margin: 1px auto;
font-weight: normal;
}
.contact-info ul {
list-style-type: none;
}
.qr-code {
clear: both;
display: block;
width: 300px;
height: 300px;
margin: 0 auto;
}
.srs.logo {
width: 300px;
height: 150px;
margin: 10px auto;
}
.items-table {
float: left;
padding: 6px;
margin: 10px auto;
border-collapse: collapse;
width: 100%;
}
.items-table th,
.items-table td {
border: 1px solid gray;
padding: 6px;
<header>
<!-- header content goes here -->
<img src="https://drive.google.com/file/d/1mwNaPe8w4Bxn7mkXivmI2dqcwBg4_aog" alt="srs-logo" />
<div class="contact-info" style="list-style-type: none">
<ul>
<li>SARL RO SOLUTION</li>
<li>RC: RC:</li>
<li>NIF: NIF</li>
<li>AI: AI</li>
<li>Phone: Phone:</li>
<li>Email: info#company.com</li>
</ul>
</div>
</header>
<hr style="margin-top: 100px;">
<!-- rest of the page content goes here -->
<table style="float: left;">
<tr>
<td colspan="2" class="center bold">Customer Information</td>
<tr>
<tr>
<td>Customer Name:</td>
<td><<[Customer Name]>></td>
</tr>
<tr>
<td>Customer Address:</td>
<td><<[Customer Address]>></td>
</tr>
<tr>
<td>Customer NIF:</td>
<td><<[Customer NIF]>></td>
</tr>
<tr>
<td>Customer RC:</td>
<td><<[Customer RC]>></td>
</tr>
<tr>
<td>Customer AI:</td>
<td><<[Customer AI]>></td>
<tr>
<td>Telephone:</td>
<td><<[Company AI]>></td>
</tr>
</table>
<table style="float: right; margin: 0 auto">
<tr>
<td colspan="2" class="center bold">Invoice Information</td>
<tr>
<td>Invoice Date:</td>
<td><<[Invoice Date]>></td>
<tr>
<td>Invoice ID:</td>
<td><<[Invoice ID]>></td>
</tr>
</table>
<br style="clear: both;">
<img src="<<[Invoice Date]>>" alt="qr-code">
<br style="clear: both;">
<hr>
<table style="float: left;">
<tr>
<td rowspan="1" class="center bold">Related Sales</td>
<td colspan="" class="center bold">Invoice Information</td>
</table>
<br style="clear: both;">
<hr>
<table class="items-table">
<thead>
<tr>
<th>Item description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<p class="startifend"><<Start:[invoice_key].[Related invoice_items]>></p>
<tr>
<td><<[description]>></td>
<td><<[quantity]>></td>
<td><<[unit_price]>></td>
<td><<[total_price]>></td>
</tr>
<p class="startifend"><<End>></p>
</tbody>
</table>
<br style="clear: both;">
<hr>

I'm going to presume you have a good reason for using tables over grid/flexbox.
A couple of issues to note. Firstly, be very care to always close your <tr> tags there were many unclosed tags through the code which I've corrected in the below snippet.
Secondly, the behaviour of the QR img tag was completely correct in your example and it was rendering where it should have been. In order to achieve the desired outcome, you want to put your Customer Information and Invoice Information tables inside a parent table.
In short:
<table>
<tr>
<td> <!-- Customer Information Table --> </td>
<td> <!-- Invoice Information Table --> </td>
</tr>
</table>
This will allow you to but the QR img directly underneath the Invoice Information Table inside the same <td> tag.
table {
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 10px auto;
font-size: 14px;
color: #1e2b40;
}
td,
th {
border: 1px solid gray;
padding: 6px;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.bold {
font-weight: bold;
}
.contact-info {
font-family: Arial, sans-serif;
font-size: 12px;
float: right;
margin: 1px auto;
font-weight: normal;
}
.contact-info ul {
list-style-type: none;
}
.qr-code {
clear: both;
display: block;
width: 300px;
height: 300px;
margin: 0 auto;
}
.srs.logo {
width: 300px;
height: 150px;
margin: 10px auto;
}
.items-table {
float: left;
padding: 6px;
margin: 10px auto;
border-collapse: collapse;
width: 100%;
}
.items-table th,
.items-table td {
border: 1px solid gray;
padding: 6px;
<header>
<!-- header content goes here -->
<img src="https://drive.google.com/file/d/1mwNaPe8w4Bxn7mkXivmI2dqcwBg4_aog" alt="srs-logo" />
<div class="contact-info" style="list-style-type: none">
<ul>
<li>SARL RO SOLUTION</li>
<li>RC: RC:</li>
<li>NIF: NIF</li>
<li>AI: AI</li>
<li>Phone: Phone:</li>
<li>Email: info#company.com</li>
</ul>
</div>
</header>
<hr style="margin-top: 100px;">
<!-- rest of the page content goes here -->
<table style="border:0; width:100%;">
<tr>
<td style="border:0; vertical-align:top">
<table style="float:left;margin:0">
<tr>
<td colspan="2" class="center bold">Customer Information</td>
</tr>
<tr>
<td>Customer Name:</td>
<td><<[Customer Name]>></td>
</tr>
<tr>
<td>Customer Address:</td>
<td><<[Customer Address]>></td>
</tr>
<tr>
<td>Customer NIF:</td>
<td><<[Customer NIF]>></td>
</tr>
<tr>
<td>Customer RC:</td>
<td><<[Customer RC]>></td>
</tr>
<tr>
<td>Customer AI:</td>
<td><<[Customer AI]>></td>
</tr>
<tr>
<td>Telephone:</td>
<td><<[Company AI]>></td>
</tr>
</table>
</td>
<td style="border:0; vertical-align:top;text-align:right;">
<table style="float:right;">
<tr>
<td colspan="2" class="center bold">Invoice Information</td>
</tr>
<tr>
<td>Invoice Date:</td>
<td><<[Invoice Date]>></td>
</tr>
<tr>
<td>Invoice ID:</td>
<td><<[Invoice ID]>></td>
</tr>
</table>
<br style="clear:both;">
<img src="<<[Invoice Date]>>" alt="qr-code">
</td>
</tr>
</table>
<br style="clear: both;">
<hr>
<table style="float: left;">
<tr>
<td rowspan="1" class="center bold">Related Sales</td>
<td colspan="" class="center bold">Invoice Information</td>
</tr>
</table>
<br style="clear: both;">
<hr>
<table class="items-table">
<thead>
<tr>
<th>Item description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<p class="startifend"><<Start:[invoice_key].[Related invoice_items]>></p>
<tr>
<td><<[description]>></td>
<td><<[quantity]>></td>
<td><<[unit_price]>></td>
<td><<[total_price]>></td>
</tr>
<p class="startifend"><<End>></p>
</tbody>
</table>
<br style="clear: both;">
<hr>

This should do the trick, added a container to the tables and applied flex box. Remove the margin from the table selector, if you want the tables to go to the left and right edges.
<div style="display:flex;justify-content:space-between;">
<table>
<tr>
<td colspan="2" class="center bold">Customer Information</td>
<tr>
<tr>
<td>Customer Name:</td>
<td><<[Customer Name]>></td>
</tr>
<tr>
<td>Customer Address:</td>
<td><<[Customer Address]>></td>
</tr>
<tr>
<td>Customer NIF:</td>
<td><<[Customer NIF]>></td>
</tr>
<tr>
<td>Customer RC:</td>
<td><<[Customer RC]>></td>
</tr>
<tr>
<td>Customer AI:</td>
<td><<[Customer AI]>></td>
<tr>
<td>Telephone:</td>
<td><<[Company AI]>></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" class="center bold">Invoice Information</td>
<tr>
<td>Invoice Date:</td>
<td><<[Invoice Date]>></td>
<tr>
<td>Invoice ID:</td>
<td><<[Invoice ID]>></td>
</tr>
</table>
</div>
<img style="float:right;" src="<<[Invoice Date]>>" alt="qr-code">

CSS styling: tables with inside tables (borders and backgrounds)

Trying to build some webpages that contain various tables - e.g. main table that is holding a header - main page and a footer of a page - marked 2 on the picture.
In the main section of this table I have a lot of tables that shows various data for the user - marked 1 on the picture, so I have added specific style for this tables, it looks like this:
.datatable {
border-collapse: collapse; /* hiding double lines between cells */
border: 2px solid white; /* hiding border of a table */
}
.datatable th, td
{
padding: 5px 10px;
border: 1px solid black; /* adding a border for th and td */
}
.datatable th {
background-color: #EBECEC;
font-weight: bold;
vertical-align: bottom;
}
.datatable tr:nth-child(odd) {
background-color: #EBECEC;
}
And these tables, classed with .datatable works fine and seems it's ok. when showing it's in browser.
But table which contains this tables (2) with data inside (1) - also have some borders over it's cells. My css doesn't contain any directives referring properties of simple tables, and such tables were showed without any borders (border="0" property of a table tag).
How to fix it? How to control the properties of table 2?
it seems the browser gets the properties of .datatable class and applied it to table or td of the upper-level table (inheritance or some)..
The codepen is here: https://codepen.io/gzbqqfbl-the-encoder/pen/QWqrBxP

Those borders belong to the first td in the first table so something like this (put at the end of the stylesheet to override anything else that might be inserted above)
table:first-child tr td:first-child { border: none;}
Here it is in a snippet:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>Dietonline Service. Результаты расчета потребности в основных пищевых веществах и энергии </title>
<link href="style.css" rel="stylesheet">
<style>
html,
body {
background-color: White;
font-family: rubik, sans-serif, san-serif;
font-size: 14 px;
}
table.datatable {
border-collapse: collapse;
/* hiding double lines between cells */
border: 2px solid white;
/* hiding border of a table */
}
.datatable th,
td {
padding: 5px 10px;
border: 1px solid black;
/* adding a border for th and td */
}
.datatable th {
background-color: #EBECEC;
font-weight: bold;
vertical-align: bottom;
}
.datatable tr:nth-child(odd) {
background-color: #EBECEC;
}
h1,
h2,
h3 {
color: #36CA36
}
a:link {
text-decoration: underline;
color: #36CA36;
}
a:visited {
text-decoration: underline;
color: #36CA36;
}
a:hover {
text-decoration: none;
color: #FB6737;
}
a:active {
text-decoration: underline;
color: #36CA36;
}
table {
border-collapse: collapse;
/* hiding double lines between cells */
border: 0px solid grey;
/* hiding border of a table */
}
table:first-child tr td:first-child {
border: none;
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<!--maintable-->
<table border="0" cellpadding="0" cellspacing="0" width="99%">
<tr>
<td>
<!-- 6oo px center table -->
<table align="center" cellpadding="0" cellspacing="0" width="600" border="0" style="border">
<tr>
<td align="center" bgcolor="#ffffff" style="padding: 20px 0 10px 0;">
<img src="img/sample_logo.jpg" width="200" style="display: block;">
<h3>Питание и Здоровье</h3>
</td>
</tr>
<tr>
<!--main content td-->
<td style="padding: 10px 15px 20px 15px;">
<h2>Результаты расчета индивидуальных потребностей основных пищевых веществ и энергии</h2>
<!--provided data-->
<table width=100% class="datatable">
<tr>
<th colspan='2'>Данные, предоставленные пользователем для расчета</th< /tr>
<tr>
<td>Пол</td>
<td>женский</td>
</tr>
<tr>
<td>Возраст</td>
<td>11</td>
</tr>
<tr>
<td>Вес</td>
<td>60</td>
</tr>
<tr>
<td>Коэффициент физической активности</td>
<td>1.4</td>
</tr>
<tr>
<td>Дополнительная информация</td>
<td>kid 6 year school</td>
</tr>
</table><br /> <a href='new_query?'>Неверно указаны параметры? Проведите еще один расчет ...</a>
<!--provided data end -->
<h3>Результаты расчета</h3>
<!-- proteins & energy table -->
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в белках, жирах, углеводах и энергии</th>
</tr>
<tr>
<td>Энергия, ккал</td>
<td>2400.0</td>
</tr>
<tr>
<td>Белки, г</td>
<td>80.0</td>
</tr>
<tr>
<td>Белки животного происхождения, г</td>
<td>57.0</td>
</tr>
<tr>
<td>Жиры, г</td>
<td>78.0</td>
</tr>
<tr>
<td>Углеводы, г</td>
<td>346.0</td>
</tr>
</table>
<br />
<!--proteins and energy table end-->
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в минералах</th>
</tr>
<tr>
<td>Кальций, мг</td>
<td>1200.0</td>
</tr>
<tr>
<td>Фосфор, мг</td>
<td>1200.0</td>
</tr>
<tr>
<td>Магний, мг</td>
<td>300.0</td>
</tr>
<tr>
<td>Железо, мг</td>
<td>17.0</td>
</tr>
<tr>
<td>Цинк, мг</td>
<td>12.0</td>
</tr>
<tr>
<td>Йод, мкг</td>
<td>160.0</td>
</tr>
<tr>
<td>Селен, мкг</td>
<td>55.0</td>
</tr>
<tr>
<td>Медь, мг</td>
<td>1.8</td>
</tr>
<tr>
<td>Марганец, мг</td>
<td>0.0</td>
</tr>
<tr>
<td>Хром, мкг</td>
<td>0.0</td>
</tr>
<tr>
<td>Молибден, мкг</td>
<td>0.0</td>
</tr>
</table><br />
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в витаминах</th>
</tr>
<tr>
<td>Витамин А, мкг РЕ</td>
<td>600.0</td>
</tr>
<tr>
<td>Биотин, мкг</td>
<td>25.0</td>
</tr>
<tr>
<td>Пантотеновая кислота, мг</td>
<td>4.0</td>
</tr>
</table>
<br />
<table width="100%" class="datatable">
<tr>
<th colspan="2">Рекомендованные нормы потребления минорных и биологически активных веществ еды с установленным физиологическим действием на организм</th>
</tr>
<tr>
<td>Каротиноиды, мг</td>
<td>15</td>
</tr>
<tr>
<td>Бета-каротин, мг</td>
<td>5</td>
</tr>
</table>
<br />
</td>
</tr>
<tr>
<td bgcolor="#EBECEC" style="padding: 20px 20px 20px 20px;">
©Dietonline Service, 2022
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Trying to conditionally colour table cells background and font colour based on content, negative, positive and no change

Truly lost here.
Have looked at all related code snippets and can't make any work for me.
I need to conditionally format a table cells background color based on content.
Red for <0
Green for >0
White for 0
Also I need to be able to conditionally change the font color of other cells based on content.
Red for <0
Green for >0
Black for 0
I now have this for the background coloring so far, but it does not work as it should. (WORKS NOW)
Have made it work for background finally!!
Just need the font color to work in the last three columns of my table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>colored rating scale</title>
<script
type="text/javascript"
src="http://code.jquery.com/jquery-1.5.js"
></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style id="compiled-css" type="text/css">
table {
width: 60em;
}
#name {
width: 20%;
}
#symbol {
width: 5%;
}
#thisrank {
width: 10%;
}
#lastrank {
width: 10%;
}
#change {
width: 10%;
}
#marketcap {
width: 15%;
}
#price {
width: 15%;
}
#weekpc {
width: 5%;
}
#monthpc {
width: 5%;
}
#yearpc {
width: 5%;
}
th {
border-bottom: 2px solid #000;
padding: 0.5em 0 0.1em 0;
font-size: 1.2em;
}
td {
border-bottom: 2px solid #ccc;
padding: 0.5em 0 0.1em 0;
}
th:nth-child(even),
td:nth-child(even) {
text-align: center;
}
.up {
background-color: #9f0;
/*color:#9f0;*/
}
.nochange {
background-color: #fff;
}
.down {
background-color: #f30;
}
</style>
</head>
<body>
<p><br>
<b>This table is broke, (NOW WORKS FOR BACKGROUND COLOR) BUT...<br>
1. <u>font color</u> of "weekpc" , "monthpc" and "yearpc" should be red/green/no-color
according to whether the contents are negative/positive/no-change in percentages.<br>
2. All fonts should be Arial.</b>
<table align="center">
<col id="name" />
<col id="symbol" />
<col id="thisrank" />
<col id="lastrank" />
<col id="change" />
<col id="marketcap" />
<col id="price" />
<col id="weekpc" />
<col id="monthpc" />
<col id="yearpc" />
<thead>
<tr>
<th>Name</th>
<th>Symbol</th>
<th colspan="3">Rank</th>
<th>Market Cap.</th>
<th>Price</th>
<th>Week %</th>
<th>Month %</th>
<th>Year %</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"> </td>
<td align="left"> </td>
<td align="center"><b> This Week </b></td>
<td align="center"><b> Last Week </b></td>
<td align="center"><b> Change </b></td>
<td align="right"><b> </b></td>
<td align="right"><b> </b></td>
<td align="right"><b> </b></td>
<td align="right"><b> </b></td>
<td align="right"><b> </b></td>
</tr>
<tr>
<td align="left"> ABC Corp. </td>
<td align="left"> ABC </td>
<td align="center"> 1 </td>
<td align="center"> 1 </td>
<td align="center"><b> 0 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> 0% </td>
<td align="right"> 0.01% </td>
<td align="right"> 0.02% </td>
</tr>
<tr>
<td align="left"> DEF Corp. </td>
<td align="left"> DEF </td>
<td align="center"> 2 </td>
<td align="center"> 3 </td>
<td align="center"><b> -1 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> -10% </td>
<td align="right"> -15% </td>
<td align="right"> -25% </td>
</tr>
<tr>
<td align="left"> GHI Corp. </td>
<td align="left"> GHI </td>
<td align="center"> 3 </td>
<td align="center"> 2 </td>
<td align="center"><b> 1 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> 10% </td>
<td align="right"> 15% </td>
<td align="right"> 25% </td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function() {
$('tbody > tr').each(function(index) {
//get td text
var change = parseInt($(this).find("td:eq(4)").text().trim());
console.log(change)
//depending on condtion add class..
if (change < 0) {
$(this).find("td:eq(4)").addClass('down')
} else if (change > 0) {
$(this).find("td:eq(4)").addClass('up')
} else {
$(this).find("td:eq(4)").addClass('nochange')
}
});
});
</script>
</body>
</html>

You can simply get value of second td tag using :eq(1) and then depending on the value add class.
Demo Code :
$(function() {
$('tbody > tr').each(function(index) {
//get td text
var score = parseInt($(this).find("td:eq(4)").text().trim());
//depending on condtion add class..
if (score < 0) {
$(this).find("td:eq(4)").addClass('down')
$(this).find("td:gt(6)").css({
"color": "red",
"font-family": "Arial"
})
} else if (score > 0) {
$(this).find("td:eq(4)").addClass('up')
$(this).find("td:gt(6)").css({
"color": "#9f0",
"font-family": "Arial"
})
} else {
$(this).find("td:eq(4)").addClass('nochange')
}
});
});
table {
width: 20em;
}
#score {
width: 50%;
}
#name {
width: 50%;
}
th {
border-bottom: 2px solid #000;
padding: 0.5em 0 0.1em 0;
font-size: 1.2em;
}
td {
border-bottom: 2px solid #ccc;
padding: 0.5em 0 0.1em 0;
}
th:nth-child(even),
td:nth-child(even) {
text-align: center;
}
.up {
background-color: #9f0;
/*color:#9f0;*/
}
.nochange {
background-color: #fff;
}
.down {
background-color: #f30;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table align="center">
<col id="name" />
<col id="symbol" />
<col id="thisrank" />
<col id="lastrank" />
<col id="change" />
<col id="marketcap" />
<col id="price" />
<col id="weekpc" />
<col id="monthpc" />
<col id="yearpc" />
<thead>
<tr>
<th>Name</th>
<th>Symbol</th>
<th colspan="3">Rank</th>
<th>Market Cap.</th>
<th>Price</th>
<th>Week %</th>
<th>Month %</th>
<th>Year %</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"> </td>
<td align="left"> </td>
<td align="center"><b> This Week </b></td>
<td valign="center"><b> Last Week </b></td>
<td valign="center"><b> Change </b></td>
<td><b> </b></td>
<td><b> </b></td>
<td><b> </b></td>
<td><b> </b></td>
<td><b> </b></td>
</tr>
<tr>
<td align="left"> ABC Corp. </td>
<td align="left"> ABC </td>
<td align="center"> 1 </td>
<td align="center"> 1 </td>
<td align="center"><b> 0 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> 0% </td>
<td align="right"> 0.01% </td>
<td> 0.02% </td>
</tr>
<tr>
<td align="left"> DEF Corp. </td>
<td align="left"> DEF </td>
<td align="center"> 2 </td>
<td align="center"> 3 </td>
<td align="center"><b> -1 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> -10% </td>
<td align="right"> -15% </td>
<td align="right"> -25% </td>
</tr>
<tr>
<td align="left"> GHI Corp. </td>
<td align="left"> GHI </td>
<td align="center"> 3 </td>
<td align="center"> 2 </td>
<td align="center"><b> 1 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> 10% </td>
<td align="right"> 15% </td>
<td align="right"> 25% </td>
</tr>
</tbody>
</table>

One option would be to update your if statement to include the other options, similar to the answer Swati provided:
var result = function() {
if (score <= -1) {
return 'down';
} else if (score >= 1) {
return 'up';
}
return 'nochange';
}
$(function() {
$('tr > td:odd').each(function(index) {
var scale = [
['down', -1],
['nochange', 0],
['up', 1]
];
var score = $(this).text();
var result = function() {
if (score <= -1) {
return 'down';
} else if (score >= 1) {
return 'up';
}
return 'nochange';
}
$(this).addClass(result);
});
});
table {
width: 20em;
}
#score {
width: 50%;
}
#name {
width: 50%;
}
th {
border-bottom: 2px solid #000;
padding: 0.5em 0 0.1em 0;
font-size: 1.2em;
}
td {
border-bottom: 2px solid #ccc;
padding: 0.5em 0 0.1em 0;
}
th:nth-child(even),
td:nth-child(even) {
text-align: center;
}
.up {
background-color: #9f0;
color: darkgreen;
}
.nochange {
background-color: #fff;
color: black;
}
.down {
background-color: #f30;
color: darkred;
}
/* EOS */
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>colored rating scale</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
</head>
<body>
<table>
<col id="name" />
<col id="score" />
<thead>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mr Down</td>
<td>-10</td>
</tr>
<tr>
<td>No Change</td>
<td>0</td>
</tr>
<tr>
<td>Mr Up</td>
<td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
Another option would be to use a ternary operator to compare the scores, if you don't mind hard-coding the index values (you won't have more than those three options on the scale, for example):
var result = (score <= scale[0][1]) ? scale[0][0] : (score >= scale[2][1]) ? scale[2][0] : scale[1][0];
$(function() {
$('tr > td:odd').each(function(index) {
var scale = [
['down', -1],
['nochange', 0],
['up', 1]
];
var score = $(this).text();
var result = (score <= scale[0][1]) ? scale[0][0] : (score >= scale[2][1]) ? scale[2][0] : scale[1][0];
$(this).addClass(result);
});
});
table {
width: 20em;
}
#score {
width: 50%;
}
#name {
width: 50%;
}
th {
border-bottom: 2px solid #000;
padding: 0.5em 0 0.1em 0;
font-size: 1.2em;
}
td {
border-bottom: 2px solid #ccc;
padding: 0.5em 0 0.1em 0;
}
th:nth-child(even),
td:nth-child(even) {
text-align: center;
}
.up {
background-color: #9f0;
color: darkgreen;
}
.nochange {
background-color: #fff;
color: black;
}
.down {
background-color: #f30;
color: darkred;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>colored rating scale</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
</head>
<body>
<table>
<col id="name" />
<col id="score" />
<thead>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mr Down</td>
<td>-10</td>
</tr>
<tr>
<td>No Change</td>
<td>0</td>
</tr>
<tr>
<td>Mr Up</td>
<td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
To conditionally change the font color, you could just update the CSS classes .up, .down, and .nochange to include them as I've done in the snippets (unless you mean to change the font color of other cells besides the scores).

Head first html and css 2nd edition p627 unexpected vertical border

I have been reading the book of head first html and CSS 2nd and I found on Page627 there are unexpected vertical showed in a table. Could anyone tell me what is the problem.
Here is the html and CSS code:
#font-face {
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"), url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
h1,
h2 {
color: #cc6600;
border-bottom: thin dotted #888888;
}
h1 {
font-family: "Emblema One", sans-serif;
font-size: 220%;
}
h2 {
font-size: 130%;
font-weight: normal;
}
blockquote {
font-style: italic;
}
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
border-collapse: collapse;
}
table table th {
background-color: white;
}
td,
th {
border: thin dotted gray;
padding: 5px;
}
th {
background-color: #cc6600;
}
.cellcolor {
background-color: #fcba7a;
}
caption {
font-style: italic;
padding-top: 8px;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
li {
/* list-style-image: url(images/backpack.gif); */
padding-top: 5px;
margin-left: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Trip Around the USA on a Segway</title>
<link type="text/css" rel="stylesheet" href="journal.css">
</head>
<body>
<h1>Segway'n USA</h1>
<p>
Documenting my trip around the US on my very own Segway!
</p>
<h2>August 20, 2012</h2>
<p><img src="images/segway2.jpg" alt="Me any my Segway in New Mexico"></p>
<p>
Well I made it 1200 miles already, and I passed through some interesting places on the way:
</p>
<table>
<caption>
The cities I visited on my Segway'n USA travels
</caption>
<tr>
<th>City</th>
<th>Date</th>
<th>Temperature</th>
<th>Altitude</th>
<th>Population</th>
<th>Diner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td class="center">June 15th</td>
<td class="center">75</td>
<td class="right">1,204 ft</td>
<td class="right">29,686</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Magic City, ID</td>
<td class="center">June 25th</td>
<td class="center">74</td>
<td class="right">5,312 ft</td>
<td class="right">50</td>
<td class="center">3/5</td>
</tr>
<tr>
<td>Bountiful, UT</td>
<td class="center">July 10th</td>
<td class="center">91</td>
<td class="right">4,226 ft</td>
<td class="right">41,173</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Last Chance, CO</td>
<td class="center">July 23rd</td>
<td class="center">102</td>
<td class="right">4,780 ft</td>
<td class="right">265</td>
<td class="center">3/5</td>
</tr>
<tr>
<td rowspan="2">Truth or Consequences, NM</td>
<td class="center">August 9th</td>
<td class="center">93</td>
<td rowspan="2" class="right">4,242 ft</td>
<td rowspan="2" class="right">7,289</td>
<td class="center">5/5</td>
</tr>
<tr>
<td class="center">August 27th</td>
<td class="center">98</td>
<td class="center">
<table>
<tr>
<th>Tess</th>
<td>5/5</td>
</tr>
<tr>
<th>Tony</th>
<td>4/5</td>
</tr>
</table>
</td>
</tr>
<tr class="cellcolor">
<td>Why, AZ</td>
<td class="center">August 18th</td>
<td class="center">104</td>
<td class="right">860 ft</td>
<td class="right">480</td>
<td class="center">3/5</td>
</tr>
</table>
<h2>July 14, 2012</h2>
<p>
I saw some Burma Shave style signs on the side of the road today:
</p>
<blockquote>
<p>
Passing cars, <br> When you can't see, <br> May get you, <br> A glimpse, <br> Of eternity. <br>
</p>
</blockquote>
<p>
I definitely won't be passing any cars.
</p>
<h2>June 2, 2012</h2>
<p><img src="images/segway1.jpg" alt="The first day of the trip"></p>
<p>
My first day of the trip! I can't believe I finally got everything packed and ready to go. Because I'm on a Segway, I wasn't able to bring a whole lot with me:
</p>
<ul>
<li>cellphone</li>
<li>iPod</li>
<li>digital camera</li>
<li>and a protein bar</li>
</ul>
<p>
Just the essentials. As Lao Tzu would have said, <q>A journey of a
thousand miles begins with one Segway.</q>
</p>
<!--
<p>
To do list:
</p>
<ul>
<li>Charge Segway</li>
<li>Pack for trip
<ul>
<li>cellphone</li>
<li>iPod</li>
<li>digital camera</li>
<li>a protein bar</li>
</ul>
</li>
</ul>
-->
</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.