I need to create an agreement document on the fly with the customer information like name, address etc.
Customer has to click the checkbox to confirm before proceed to payment process.
It is most likely a terms and conditions page with customer information.
Is it possible?
You may see an example of it below to find which parts of the file will be filled on the fly:
All the red parts should be filled with customer and cart information.
Agreement form
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 18px;">
<p>INFORMATION FORM</p>
<p>1. SELLER INFORMATION</p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 130px;">Company</td>
<td style="width: 10px;">:</td>
<td>Placeholder (Referred to as "Seller")</td>
</tr>
<tr>
<td style="width: 130px;">Address</td>
<td style="width: 10px;">:</td>
<td>Placeholder</td>
</tr>
<tr>
<td style="width: 130px;">Phone</td>
<td style="width: 10px;">:</td>
<td>Placeholder</td>
</tr>
<tr>
<td style="width: 130px;">E-mail</td>
<td style="width: 10px;">:</td>
<td>Placeholder</td>
</tr>
</tbody>
</table>
<br>
<p>2. CLIENT INFORMATION</p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 130px;">Name / Sirname</td>
<td style="width: 10px;">:</td>
<td style="color: red;">**********</td>
</tr>
<tr>
<td style="width: 130px;">Shipping Address</td>
<td style="width: 10px;">:</td>
<td style="color: red;">**********</td>
</tr>
<tr>
<td style="width: 130px;">Phone</td>
<td style="width: 10px;">:</td>
<td style="color: red;">**********</td>
</tr>
<tr>
<td style="width: 130px;">E-mail</td>
<td style="width: 10px;">:</td>
<td style="color: red;">**********</td>
</tr>
</tbody>
</table>
<br>
<p>4. AGREEMENT SUBJECT AND THE PRODUCT SPECS</p>
<table style="border: 1px solid #808080; width: 100%; border-collapse: collapse; line-height: 24px; font-size: 12px;" cellspacing="2">
<tbody>
<tr>
<td style="height: 25px; border: 1px solid #808080;"><b>Product</b></td>
<td style="width: 50px; text-align: center; height: 25px; border: 1px solid #808080;"><b>Quantity</b></td>
<td style="width: 150px; text-align: center; height: 25px; border: 1px solid #808080;"><b>Price</b></td>
<td style="width: 150px; text-align: center; height: 25px; border: 1px solid #808080;"><b>Total</b></td>
</tr>
</tbody>
</table>
<table style="border: 1px solid #808080; width: 100%; border-collapse: collapse; line-height: 24px; font-size: 12px;" cellspacing="2">
<tbody>
<tr>
<td style="height: 25px; border: 1px solid #808080; color: red;">Arduino Uno R3 SMD Klon CH340 Chip</td>
<td style="width: 50px; text-align: center; height: 25px; border: 1px solid #808080; color: red;">*</td>
<td style="text-align: center; height: 25px; border: 1px solid #808080; width: 150px; color: red;">$***</td>
<td style="text-align: center; height: 25px; border: 1px solid #808080; width: 150px; color: red;">$***</td>
</tr>
</tbody>
</table>
<table style="border: 1px solid #808080; width: 100%; border-collapse: collapse; line-height: 24px; font-size: 12px;" cellspacing="2">
<tbody>
<tr>
<td style="height: 25px; border: 1px solid #808080; color: red;">LattePanda Windows 10 2G/32GB</td>
<td style="width: 50px; text-align: center; height: 25px; border: 1px solid #808080; color: red;">*</td>
<td style="text-align: center; height: 25px; border: 1px solid #808080; width: 150px; color: red;">$***</td>
<td style="text-align: center; height: 25px; border: 1px solid #808080; width: 150px; color: red;">$***</td>
</tr>
</tbody>
</table>
<table style="border: 1px solid #808080; width: 100%; border-collapse: collapse; line-height: 24px; font-size: 12px;" cellspacing="2">
<tbody>
<tr>
<td style="height: 25px; border: 1px solid #808080; color: red;">Raspberry Pi 3 Model B+ Plus</td>
<td style="width: 50px; text-align: center; height: 25px; border: 1px solid #808080; color: red;">*</td>
<td style="text-align: center; height: 25px; border: 1px solid #808080; width: 150px; color: red;">$***</td>
<td style="text-align: center; height: 25px; border: 1px solid #808080; width: 150px; color: red;">$***</td>
</tr>
</tbody>
</table>
<table style="border: 1px solid #808080; width: 100%; border-collapse: collapse; line-height: 24px; font-size: 12px;" cellspacing="2">
<tbody>
<tr>
<td style="height: 25px; border: 1px solid #808080; color: red;">BBC Micro:Bit Dev Card</td>
<td style="width: 50px; text-align: center; height: 25px; border: 1px solid #808080; color: red;">*</td>
<td style="text-align: center; height: 25px; border: 1px solid #808080; width: 150px; color: red;">$***</td>
<td style="text-align: center; height: 25px; border: 1px solid #808080; width: 150px; color: red;">$***</td>
</tr>
</tbody>
</table>
<table style="border: 1px solid #808080; width: 100%; border-collapse: collapse; line-height: 24px; font-size: 12px;" cellspacing="2">
<tbody>
<tr>
<td colspan="3" style="border: 1px solid #808080; height: 25px;">Shipping</td>
<td colspan="1" style="border: 1px solid #808080; height: 25px; text-align: right; width: 150px; color: red;"><b>************</b></td>
</tr>
<tr>
<td colspan="3" style="border: 1px solid #808080; height: 25px;">Payment Method</td>
<td style="text-align: right; border: 1px solid #808080; height: 25px; width: 150px; color: red;" colspan="1">************</td>
</tr>
<tr>
<td colspan="3" style="border: 1px solid #808080; height: 25px;"><b>Total</b></td>
<td colspan="1" style="border: 1px solid #808080; height: 25px; text-align: right; width: 150px; color: red;"><b>************</b></td>
</tr>
</tbody>
</table>
Related
i don't understand why border of first tbody tr's td is not visible.
i think there is no reason border is not visible.
what i fugure out is this.
if natural height of th is higher than height i fixed for th, first tbody tr's td is visible.
if there is no code th{height: xxpx; }, first tbody tr's td is visible.
.table {
border-spacing: 0;
border-collapse: collapse;
}
.table.summary-style
{
font-size: 11px;
width: 100%;
table-layout: fixed;
text-align: center;
color: #666;
border-bottom: 1px solid #666;
background: #fff;
}
.table.summary-style caption
{
font-size: 0;
line-height: 0;
display: none;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
.table.summary-style thead th
{
font-size: 16px;
line-height: 1;
position: relative;
box-sizing: border-box;
height: 38px;
padding: 5px 4px;
text-align: center;
vertical-align: middle;
color: #666;
background: #ddd;
}
.table.summary-style > tbody > tr > td
{
font-size: 13px;
line-height: 1.38;
box-sizing: border-box;
height: 36px;
padding: 4px 10px;
text-align: left;
vertical-align: middle;
color: #666;
border-top: 1px solid #666;
background: #fff;
}
<table class="table summary-style">
<thead>
<tr>
<th scope="col">title</th>
<th scope="col">title</th>
<th scope="col">title</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">No Data.</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
This is happening because position: relative; on .table.summary-style thead th causes that row of elements to appear 'above' the borders of other elements. This is despite the fact that box-sizing: border-box; has been used, as the borders of the table elements have been collapsed together. The solution is to either remove position: relative; on the first row or remove border-collapse: collapse; from .table.
.table {
border-spacing: 0;
border-collapse: collapse;
}
.table.summary-style
{
font-size: 11px;
width: 100%;
table-layout: fixed;
text-align: center;
color: #666;
border-bottom: 1px solid #666;
background: #fff;
}
.table.summary-style caption
{
font-size: 0;
line-height: 0;
display: none;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
.table.summary-style thead th
{
font-size: 16px;
line-height: 1;
box-sizing: border-box;
height: 38px;
padding: 5px 4px;
text-align: center;
vertical-align: middle;
color: #666;
background: #ddd;
}
.table.summary-style > tbody > tr > td
{
font-size: 13px;
line-height: 1.38;
box-sizing: border-box;
height: 36px;
padding: 4px 10px;
text-align: left;
vertical-align: middle;
color: #666;
border-top: 1px solid #666;
background: #fff;
}
<table class="table summary-style">
<thead>
<tr>
<th scope="col">title</th>
<th scope="col">title</th>
<th scope="col">title</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">No Data.</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
Try:
table,
td,
th {
border-collapse: collapse;
padding: 0.5em 1em;
border: 2px solid black;
}
.table.summary-style {
font-size: 11px;
width: 100%;
table-layout: fixed;
text-align: center;
color: #666;
border-bottom: 1px solid #666;
background: #fff;
}
.table.summary-style caption {
font-size: 0;
line-height: 0;
display: none;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
.table.summary-style thead th {
font-size: 16px;
line-height: 1;
position: relative;
box-sizing: border-box;
height: 38px;
padding: 5px 4px;
text-align: center;
vertical-align: middle;
color: #666;
background: #ddd;
}
.table.summary-style>tbody>tr>td {
font-size: 13px;
line-height: 1.38;
box-sizing: border-box;
height: 36px;
padding: 4px 10px;
text-align: left;
vertical-align: middle;
color: #666;
border-top: 1px solid #666;
background: #fff;
}
<table class="table summary-style">
<thead>
<tr>
<th scope="col">title</th>
<th scope="col">title</th>
<th scope="col">title</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">No Data.</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
I am trying to make an html signature using a table, however I can't seem to get it to look clean on mobile. I have tried the "Sky's the limit" height at "190px" keeping it from expanding over the entire page in outlook (everyone at this office uses outlook, my code works in most emails but not in outlook for some reason), but it looks funny after opened in mobile. To keep this weird table adjustment from happening, putting the image at 100% width has helped but it expands over the entire page on a normal email and still doesn't look great on mobile. Is there any way I can get my code to look the way I want it to on both mobile and desktop?
At 190px on mobile:
At 100% on mobile:
How I want it to look:
My Code:
<div style="height: 190px; width: 500px; max-height: 190px; max-width: 500px; min-width: 500px;">
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr><td valign="center" style="padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0px; border-top: 0; border-bottom: 0: border-left: 0; border-right: solid #2b2b2b"><img id="preview-image-url" src="https://i.imgur.com/JeK1isp.png" nosend="1" border="0" height="100%" alt="SkyBound USA"></td>
<td style= "padding-top:0; padding-bottom:0; padding-left: 5px; padding-right: 5px; background: #2b2b2b" >
<td valign="bottom" style="padding-left: 0px; padding-right: 0px; background: #2b2b2b;" >
<a href="https://www.instagram.com/skybound.trampolines/">
<img src="https://i.imgur.com/h7f7fjo.png" nosend="1" border="0" height="30" alt="Instagram">
</a><br>
<a href="https://www.facebook.com/SkyBoundUSA/">
<img src="https://i.imgur.com/MJ35g0C.png" nosend="1" border="0" width="30" alt="Facebook">
</a><br>
<a href="https://www.youtube.com/channel/UCH0821QeTOByekqpvrAE6pQ">
<img src="https://i.imgur.com/NuZrjP6.png" nosend="1" border="0" width="30" alt="YouTube">
</a><br>
</td>
<td style= "padding-top:0; padding-bottom:0; padding-left: 5px; padding-right: 5px; background: #2b2b2b;" >
<td style="padding-top: 0; padding-bottom: 0; padding-left: 12px; padding-right: 15px; background: #ebebeb">
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0; background: #ebebeb;">
<tr>
<td colspan="2">
<a href= "https://www.skyboundusa.com/"><img src= "https://i.imgur.com/Ml3FJ3X.png" nosend="1" border="0" width="90" padding-bottom="5" alt="Facebook"></td></tr>
<tr>
<!-- name goes here -->
<td colspan="2" style="padding-bottom: 3px; color: orange; font-size: 18px; font-family: Arial, Helvetica, sans-serif; padding-top: 5px; ">CORINNE NICEWICK</td></tr>
<tr><td colspan="2" style="color: #2b2b2b; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">
<!-- title goes here -->
<i>Design and Marketing Consultant</i></td></tr>
<tr>
<td colspan="2" style="color: #2b2b2b; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">
<strong>SkyBound USA</strong></td></tr>
<tr><td width="5" valign="top" style="vertical-align: top; width: 20px; color: orange; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">p:</td>
<!-- phone numbers go here primary first, then mobile-->
<td valign="top" style="vertical-align: top; color: #2b2b2b; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"> 888.891.4689
<span style="color: orange;">m: </span>703.795.7373</td></tr>
<tr><td width="5" valign="top" style="vertical-align: top; width: 20px; color: orange; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">a:</td>
<td valign="top" style="vertical-align: top; color: #2b2b2b; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">3140 Warner Ave., Santa Ana, CA 92704</td></tr>
<tr><td width="5" valign="top" style="vertical-align: top; width: 20px; color: orange; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">w:</td>
<td valign="top" style="vertical-align: top; color: #2b2b2b; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">
www.SkyBoundUSA.com</td></tr>
<tr><td width="5" valign="top" style="vertical-align: top; width: 20px; color: orange; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">e:</td>
<td valign="top" style="vertical-align: top; color: #2b2b2b; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">
cnicewick#skyboundusa.com</td></tr>
<!-- email goes here - replace mailto and name -->
<tr>
</td>
</tr>
</table>
</td></tr></table>
</div>
I have a table where I'd like the row/table head to be red, but with a slightly rounded corner to be smoother than a straight edge, but I also need to space the width between the heading or the radius would be pointless. Only option I can think of is creating an empty th for a divider. But would prefer a CSS fix.
Code
.restaurant {
width: 80%;
background-color: #FFFFFF;
color: #000000;
border: 1px solid #FFFFFF;
z-index: -1;
}
.restaurant tr {
width: 100%;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-spacing: 5px;
z-index: -1;
}
.restaurant td {
height: 100%;
background-color: #FFFFFF;
color: #000000;
border: 1px solid #FFFFFF;
z-index: -1;
}
.restaurant th {
line-height: 15px;
background-color: #DE0000;
color: #FFFFFF;
border: 5px solid #FFFFFF
border-spacing: 10px;
border-radius: 4px;
}
html
<table class="restaurant">
<tr>
<td colspan="2">
<table class="restaurant-corners">
<tr>
<td width="10%">
<img src="/css/images/menu-corner-top-left.png" class="corners">
</td>
<td width="80%">
</td>
<td width="10%">
<img src="/css/images/menu-corner-top-right.png" class="corners" align="right">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table class="restaurant-logo" cellspacing="0">
<tr>
<td colspan="3">
<center><img src="/css/uncletoms.png"></center>
</td>
</tr>
<tr>
<th width="80%">
<h2>Breakfast</h2>
</th>
<th width="20%">
<h2>Drinks</h2>
</th>
</tr>
</table>
Probably more information there then needed. But I wanted to make sure I didn't missing anything.
When designing a table with rounded corners, do not use border-collapse: collapse. OP's request for row to be red is vague...Red borders? Text? Background?...Need specifics. We will apply border-radius to the table's border and to the first and last <th> borders. See the comments in the Snippet:
section {
padding: 20px 10px;
width: 100%;
height: auto;
border-bottom: 3px ridge #FF6;
margin: 0 5px 20px;
}
table.x {
position: relative;
padding: 0;
box-shadow: 0 1px 9px 1px #ccc;
/* This will round the outside border on all 4 corners */
/* If you want only the head to have rounded corners uncomment *1* ruleset and remove or comment *2*/
/* border-top-left-radius: 6px;
border-top-right-radius: 6px;
*/
border-radius: 6px;
margin: 20px auto;
table-layout: fixed;
width: 50%;
height: 100%;
max-height: 550px;
}
.x th {
color: #FFF;
background: #2C7EDB;
padding: 10px;
text-align: center;
vertical-align: middle;
}
.x tr:nth-child(odd) {
background-color: #333;
color: #FFF;
}
.x tr:nth-child(even) {
background-color: #D3E9FF;
color: #333;
}
.x td {
border-style: solid;
border-width: 1px;
border-color: #264D73;
padding: 5px;
text-align: left;
vertical-align: top;
position: relative;
}
/* Next 2 rulesets are used to create rounded corners to the inner borders of the head */
/* Remove or comment the last 2 rulesets if you don't want the bottom corners rounded */
.x thead th:first-child {
border-top-left-radius: 6px;
}
.x thead th:last-child {
border-top-right-radius: 6px;
}
.x tbody tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
.x tbody tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
<section>
<table class="x">
<caption>table.x</caption>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>
</section>
I'm trying to create responsive emailer which is not working in Outlook. Can you please help me out? I also tried to inset div align center but still not working.
Right now its center align but when I view it on mobile its left align.
<center>
<!--[if mso]>
<table style="width: 300px;">
<tr>
<td>
<![endif]-->
<!--one-->
<table border="0" cellpadding="0" cellspacing="0" align="left" width="225" height="158" bgcolor="#006699">
<tr>
<td style="padding: 0;" align="left" class="responsive-image middle">
<img src="http://www.eruditus.com/emailer/0418_responsive_columbia/bg.jpg" style="display: block; margin: 0; padding: 0;">
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="225" bgcolor="#0093d4" height="158px">
<tr>
<td width="" style="padding: 0 0 0 0; background-color: #0093d4; vertical-align: top;" bgcolor="#0093d4" valign="top">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#0093d4">
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
</tr>
<tr>
<td width="56" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0 10px;" bgcolor="#0093d4" valign="top">Email:</td>
<td width="273" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top">EPM_columbia#eruditus.com
</td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0 0 0 10px;" bgcolor="#0093d4" valign="top">Phone:</td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0px; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+91 22 6162 3112(India)</span>
</td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+971 044302011(Dubai)</span>
</td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+1 862 252 5823(USA)</span>
</td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
</tr>
</table>
</td>
</tr>
</table>
</center>
Place the table inside a div and in the div tag give align="centre".
This may solve the issue.
I am new to designing,can anyone please suggest me how to design a table with fixed row header at the top and should be able to see the data under relevant columns by scrolling with fixed header.Either using tables or divs please.
Is this DEMO what you need?
<div style="margin: 0; padding: 0; border-collapse: collapse; width: 519px; height: 100px; overflow: hidden; border: 1px solid black;">
<table style="margin: 0; padding: 0; border-collapse: collapse; color: White; width: 517px; height: 20px; text-align: left; background-color: Blue;">
<colgroup>
<col width="200px"/>
<col width="150px"/>
<col width="150px"/>
<col width="16px"/>
</colgroup>
<tbody>
<tr style="margin: 0; padding: 0; border-collapse: collapse;">
<th style="margin: 0; padding: 0; border-collapse: collapse;">
Column 1
</th>
<th style="margin: 0; padding: 0; border-collapse: collapse;">
Column 2
</th>
<th style="margin: 0; padding: 0; border-collapse: collapse;">
Column 3
</th>
<th style="margin: 0; padding: 0; border-collapse: collapse;">
</th>
</tr>
</tbody>
</table>
<div style="margin: 0; padding: 0; border-collapse: collapse; width: 517px; height:77px; overflow: auto;"
>
<table style="margin: 0; padding: 0; border-collapse: collapse; width: 500px;">
<colgroup>
<col width="200px"/>
<col width="150px"/>
<col width="150px"/>
</colgroup>
<tbody style="margin: 0; padding: 0; border-collapse: collapse;">
<tr style="margin: 0; padding: 0; border-collapse: collapse;">
<td style="border: 1px solid lightgrey;">
Row A-1
</td>
<td style="border: 1px solid lightgrey;">
Row A-2
</td>
<td style="border: 1px solid lightgrey;">
Row A-3
</td>
</tr>
<tr style="margin: 0; padding: 0; border-collapse: collapse;">
<td style="border: 1px solid lightgrey;">
Row B-1
</td>
<td style="border: 1px solid lightgrey;">
Row B-2
</td>
<td style="border: 1px solid lightgrey;">
Row B-3
</td>
</tr>
<tr style="margin: 0; padding: 0; border-collapse: collapse;">
<td style="border: 1px solid lightgrey;">
Row C-1
</td>
<td style="border: 1px solid lightgrey;">
Row C-2
</td>
<td style="border: 1px solid lightgrey;">
Row C-3
</td>
</tr>
<tr style="margin: 0; padding: 0; border-collapse: collapse;">
<td style="border: 1px solid lightgrey;"
>
Row D-1
</td>
<td style="border: 1px solid lightgrey;">
Row D-2
</td>
<td style="border: 1px solid lightgrey;">
Row D-3
</td>
</tr>
<tr style="margin: 0; padding: 0; border-collapse: collapse;">
<td style="border: 1px solid lightgrey;">
Row E-1
</td>
<td style="border: 1px solid lightgrey;">
Row E-2
</td>
<td style="border: 1px solid lightgrey;">
Row E-3
</td>
</tr>
<tr style="margin: 0; padding: 0; border-collapse: collapse;">
<td style="border: 1px solid lightgrey;">
Row F-1
</td>
<td style="border: 1px solid lightgrey;">
Row F-2
</td>
<td style="border: 1px solid lightgrey;">
Row F-3
</td>
</tr>
<tr style="margin: 0; padding: 0; border-collapse: collapse;">
<td style="border: 1px solid lightgrey;">
Row G-1
</td>
<td style="border: 1px solid lightgrey;">
Row G-2
</td>
<td style="border: 1px solid lightgrey;">
Row G-3
</td>
</tr>
</tbody>
</table>
</div>
</div>