Skip to content

Instantly share code, notes, and snippets.

@sanfords

sanfords/testreport.html

Created February 11, 2014 04:23
Show Gist options
  • Save sanfords/8929239 to your computer and use it in GitHub Desktop.
Save sanfords/8929239 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
testreport.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Contacts Report</title>
</head>
<style>
/* try to do all this with bootstrap instead */
.field-label {
float: left;
display: block;
width: 85px;
text-align:right;
color:gray;
/* truncate long text and add ellipses */
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
.field-data {
float: left;
display: block;
width:215px;
/* color:red; */
}
.header {
margin-left:10px;
}
.record-box {
/* make it wrap */
float:left;
width:300px;
/* adjust the contents */
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:12px;
border-width:1px;
border-style:solid;
border-radius:5px;
margin:5px;
padding: 10px 10px 5px 5px; /* will be added to width */
background-color:#fcfcfc;
/* keep it together on a page for non-floating blocks elements only */
page-break-inside:avoid;
}
</style>
<body>
<h1 class="header">Contacts Report</h1>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Julian</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Nash</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Duane</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Jennings</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Noah</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Peterson</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Julia</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Wong</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Dale</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Townsend</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Sara</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Montgomery</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Jack</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Burke</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Adrienne</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Lucas</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Noel</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Leonard</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Dustin</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Hicks</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Rochelle</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Wise</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Norma</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Patrick</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Thelma</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Hicks</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Freda</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Fisher</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Heather</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Gardner</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Dana</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Strickland</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Cindy</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Mendoza</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Alexis</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Ryan</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Roberta</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Estrada</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Barry</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Fitzgerald</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Mercedes1</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Bridges1</div>
<div class='field-label'>Institution:&nbsp;</div>
<div class='field-data'> U of A</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
<div class='field-label'>Address line 1:&nbsp;</div>
<div class='field-data'> 2228 E. 5th Street</div>
<div class='field-label'>Address line 2:&nbsp;</div>
<div class='field-data'> On the corner.</div>
<div class='field-label'>Address line 3:&nbsp;</div>
<div class='field-data'> By the bay</div>
<div class='field-label'>City:&nbsp;</div>
<div class='field-data'> Tucson</div>
<div class='field-label'>State, Provence, Region:&nbsp;</div>
<div class='field-data'> AZ</div>
<div class='field-label'>Zip&#x2F;Postal code:&nbsp;</div>
<div class='field-data'> 85716</div>
<div class='field-label'>Country:&nbsp;</div>
<div class='field-data'> Austria</div>
<div class='field-label'>Phone:&nbsp;</div>
<div class='field-data'> (520) 555 1212</div>
<div class='field-label'>E-mail address:&nbsp;</div>
<div class='field-data'> [email protected]</div>
<div class='field-label'>Notes:&nbsp;</div>
<div class='field-data'> These are some notes!<br /><br />And here&#x27;s line 3!</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Carroll</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Mckinney</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Rosa</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Walton</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Contact</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Robyn</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Diaz</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Sheldon</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Hammond</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Geoffrey</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Allen</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Conrad</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Brock</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Doug</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Owens</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Miranda</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Watts</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Irving</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> James</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Jimmy</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Jensen</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Dawn</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Erickson</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Richard</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Buchanan</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Gordon</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Davis</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Robin</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Houston</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Eloise</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> James</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Harry</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Collier</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Alton</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Rodgers</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Rebecca</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Gilbert</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Lucas</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Henderson</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Maria</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Stewart</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Sean</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Marshall</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Cedric</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Swanson</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Claire</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Floyd</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Nick</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Morton</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Cathy</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Dunn</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Brittany</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Thomas</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Rosa</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Carr</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Elijah</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Mcgee</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> Devin</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> King</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>First name:&nbsp;</div>
<div class='field-data'> New</div>
<div class='field-label'>Last name:&nbsp;</div>
<div class='field-data'> Supplier</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>Institution:&nbsp;</div>
<div class='field-data'> Falcon</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
<!-- bring in some sort of automatic layout with types/formatting -->
<div class='record-box'>
<div class='field-label'>Institution:&nbsp;</div>
<div class='field-data'> Home</div>
<div class='field-label'>Type:&nbsp;</div>
<div class='field-data'> Vendor</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment