Print page borders on a multi page output using wkhtmlltopdf - html

I have a requirement where I have a header html, Content HTML , and Footer HTML. in css I have put border as 1px solid black for the body. It prints fine for all pages except last page where the content html ends in middle of the page and the borders are not connected to the footer. Please have a look at screenshot attached. The yellow highlighted border is what I am looking for. Please note that the number of rows in content body are dynamic and can change
I had to remove some rows from the html because of character limitation.
wkhtmltopdf version : 12.6
OS : Windows 10
<!DOCTYPE HTML>
<html >
<head><style type="text/css">
body {
font-family:Times New Roman;
position: relative;
padding: 5px;
border: 1px solid black;
height: 350px;
}
.tableArray1 {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" class="tableArray1" style="font-size:12px;">
<tr>
<td colspan="3" align="center" border="0px" style="vertical-align:top;border-style: hidden;"><b>DOC TYPE</b></td>
</tr>
<tr>
<td align="left" width="18%" border="0" style="padding:5px;border-left-style: hidden;border-right-style: hidden;"><img width="100%" src="data:image/jpeg;base64,"></img></td>
<td width="50%" height="40" align="center" valign="top" style="border-left-style: hidden;border-right-style: hidden;">
<div>Header Goes Here</div>
<div>Header Goes Here</div>
<div>Header Goes Here</div>Header Goes Here<br></br><div width="50%" align="left" style="font-size:11px;padding-left: 6px;vertical-align:bottom;border-right-width:0px"><b>IRN :
</b></div>
</td>
<td align="right" width="32%" style="border-left-style: hidden;border-right-style: hidden;"/>
</tr>
<tr>
<td align="left" width="18%" border="0" style="padding:5px;border-left-style: hidden;border-right-style: hidden;"><img width="100%" src="data:image/jpeg;base64,"></img></td>
<td width="50%" height="40" align="center" valign="top" style="border-left-style: hidden;border-right-style: hidden;">
<div>Header Goes Here</div>
<div>Header Goes Here</div>
<div>Header Goes Here</div>Header Goes Here<br></br><div width="50%" align="left" style="font-size:11px;padding-left: 6px;vertical-align:bottom;border-right-width:0px"><b>IRN :
</b></div>
</td>
<td align="right" width="32%" style="border-left-style: hidden;border-right-style: hidden;"/>
</tr>
<tr>
<td align="left" width="18%" border="0" style="padding:5px;border-left-style: hidden;border-right-style: hidden;"><img width="100%" src="data:image/jpeg;base64,"></img></td>
<td width="50%" height="40" align="center" valign="top" style="border-left-style: hidden;border-right-style: hidden;">
<div>Header Goes Here</div>
<div>Header Goes Here</div>
<div>Header Goes Here</div>Header Goes Here<br></br><div width="50%" align="left" style="font-size:11px;padding-left: 6px;vertical-align:bottom;border-right-width:0px"><b>IRN :
</b></div>
</td>
<td align="right" width="32%" style="border-left-style: hidden;border-right-style: hidden;"/>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML>
<html >
<head><style type="text/css">
body {
font-family:Times New Roman;
border: 1px solid black;
}
tr { page-break-inside: avoid; }
td { page-break-inside: avoid; }
.tableArray1 {
border: 1px solid black;
border-collapse: collapse;
}
.page_break{
page-break-after: always;
}
</style></head>
<body>
<table border="1" cellspacing="0" cellpadding="0" class="tableArray1" style="font-size:11px;">
<tr height="20">
<td width="2%" rowspan="2" align="center"><span style="display:block;">S.</span><span style="display:block;">No.</span></td>
<td width="20%" rowspan="2" align="center">Description of Goods</td>
<td width="7%" rowspan="2" align="center">HSN Code
<div>(GST)</div>
</td>
<td width="6%" rowspan="2" align="center">Currency</td>
<td width="5%" rowspan="2" align="center">QTY</td>
<td width="5%" rowspan="2" align="center">UOM</td>
<td width="5%" rowspan="2" align="center">Rate<br>(INR)</br></td>
<td width="10%" rowspan="2" align="center">Taxable Value (INR)</td>
<td width="10%" colspan="2" align="center">CGST</td>
<td width="10%" colspan="2" align="center">SGST</td>
<td width="10%" colspan="2" align="center">IGST</td>
<td width="10%" rowspan="2" align="center">Total</td>
</tr>
<tr height="20">
<td width="5%" align="center">Rate</td>
<td width="5%" align="center">Amount</td>
<td width="5%" align="center">Rate</td>
<td width="5%" align="center">Amount</td>
<td width="5%" align="center">Rate</td>
<td width="5%" align="center">Amount</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">1</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">2</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">3</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">4</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">5</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">6</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">7</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">8</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">9</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">10</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">11</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">12</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML>
<html >
<head><style type="text/css">
body {
font-family:Times New Roman;
border: 0px solid black;
height: 100px;
}
#watermark {
color: #d0d0d0;
font-size: 130px;
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
position: absolute;
width: 50%;
height: 50%;
margin: 0;
z-index: -1;
left: 190px;
top: 400px;
}
tr { page-break-inside: avoid; }
td { page-break-inside: avoid; }
.tableArray1 {
border: 1px solid black;
border-collapse: collapse;
}
.page_break{
page-break-after: always;
}
</style></head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tableArray1" style="font-size:12px;">
<tr>
<td width="60%" valign="top" style="padding-left:5px;font-size:12px;">
Beneficiary Bank Details
<div></div>
</td>
<td align="center" width="40%"><b>Footer Footer.</b><br></br><br></br><b>Authorised Signatory</b></td>
</tr>
</table>
</body>
</html>


check the third page border for body you written as 0px try with changing to 1px
<!DOCTYPE HTML>
<html >
<head><style type="text/css">
body {
font-family:Times New Roman;
border: 1px solid black;
height: 100px;
}
#watermark {
color: #d0d0d0;
font-size: 130px;
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
position: absolute;
width: 50%;
height: 50%;
margin: 0;
z-index: -1;
left: 190px;
top: 400px;
}
tr { page-break-inside: avoid; }
td { page-break-inside: avoid; }
.tableArray1 {
border: 1px solid black;
border-collapse: collapse;
}
.page_break{
page-break-after: always;
}
</style></head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tableArray1" style="font-size:12px;">
<tr>
<td width="60%" valign="top" style="padding-left:5px;font-size:12px;">
Beneficiary Bank Details
<div></div>
</td>
<td align="center" width="40%"><b>Footer Footer.</b><br></br><br></br><b>Authorised Signatory</b></td>
</tr>
</table>
</body>
</html>


You can use ::after and ::before for the body and fix the height of these psuedo elements as much you require, try this attached css for the top HTML file.
body{font-family:Times New Roman;border:1px solid black;position:relative;}body:before{content:"";position:absolute;top:100%;left:-1px;height:150px;border:1px solid black;}body:after{content:"";position:absolute;top:100%;right:-1px;height:150px;border:1px solid black;}tr{page-break-inside:avoid;}td{page-break-inside:avoid;}.tableArray1{border:1px solid black;border-collapse:collapse;}.page_break{page-break-after:always;}

Related

Overflow: auto in Firefox not working the same as in Chrome

Depending on where you open this HTML, you will see the vertical scroll bar. In Chrome the table doesn't exceeds 180 pixels it has a height. However, in Firefox it expands and exceeds the 180 pixels it has as height. The div with id detailFee has the style of overflow: auto and the height and width are 100%. Is there any solution so the table in Firefox has the same look as Chrome?
Firefox
Chrome
<style>
#detailFee {
background: window;
height: 100%;
width: 100%;
overflow: auto;
border-style: inset;
border-width: 1;
border-color: lightgray;
box-sizing: border-box;
}
</style>
<table
width="800px"
height="180px"
style="background-color: lightblue; border-collapse: collapse"
>
<tbody>
<tr height="100%">
<td>
<div id="detailFee">
<table
style="height: 100%"
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<thead>
<tr height="19px">
<td
style="width: 15px; flex-flow: column nowrap; display: none"
nowrap=""
align="center"
>
+
</td>
<td
style="width: 15px; flex-flow: column"
nowrap=""
align="center"
>
-
</td>
<td width="60%" nowrap="" align="left">Test</td>
<td width="110px" nowrap="" align="right">Test</td>
<td width="85px" nowrap="" align="right">Test</td>
<td width="85px" nowrap="" align="right">Test</td>
</tr>
</thead>
<tbody>
<tr>
<td
style="display: none"
valign="middle"
nowrap=""
align="center"
>
+
</td>
<td
style="display: table-cell"
valign="middle"
nowrap=""
align="center"
>
Test
</td>
<td nowrap="">Test</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td style="display: none" nowrap="" align="center">
+
</td>
<td
style="display: table-cell"
nowrap=""
align="center"
>
Test
</td>
<td width="60%" nowrap="">Test</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td
style="display: none"
valign="top"
nowrap=""
align="center"
>
+
</td>
<td
style=""
valign="top"
nowrap=""
align="center"
>
-
</td>
<td width="60%" valign="top">Test</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
height="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td width="30%" nowrap="">Test</td>
<td width="30%" nowrap="">Test</td>
<td
width="110px"
nowrap=""
align="right"
>
Total Assessed
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Paid
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Due
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="6" nowrap="">Test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td style="display: none" nowrap="" align="center">
+
</td>
<td
style="display: table-cell"
nowrap=""
align="center"
>
Test
</td>
<td width="60%" nowrap="">Test</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td
style="display: none"
valign="top"
nowrap=""
align="center"
>
+
</td>
<td
style=""
valign="top"
nowrap=""
align="center"
>
-
</td>
<td width="60%" valign="top">Test</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
height="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td width="30%" nowrap="">Test</td>
<td width="30%" nowrap="">Test</td>
<td
width="110px"
nowrap=""
align="right"
>
Total Assessed
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Paid
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Due
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="6" nowrap="">Test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td style="display: none" nowrap="" align="center">
+
</td>
<td
style="display: table-cell"
nowrap=""
align="center"
>
Test
</td>
<td width="60%" nowrap="">Test</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td
style="display: none"
valign="top"
nowrap=""
align="center"
>
+
</td>
<td
style=""
valign="top"
nowrap=""
align="center"
>
-
</td>
<td width="60%" valign="top">Test</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
height="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td width="30%" nowrap="">Test</td>
<td width="30%" nowrap="">Test</td>
<td
width="110px"
nowrap=""
align="right"
>
Total Assessed
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Paid
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Due
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="6" nowrap="">Test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td style="display: none" nowrap="" align="center">
+
</td>
<td
style="display: table-cell"
nowrap=""
align="center"
>
Test
</td>
<td width="60%" nowrap="">Test</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap="" align="center">+</td>
<td style="display: none" nowrap="" align="center">
-
</td>
<td width="60%" nowrap="">Jointly/Severally Fees</td>
<td width="110px" nowrap="" align="right">$0.00</td>
<td width="85px" nowrap="" align="right">$0.00</td>
<td width="85px" nowrap="" align="right">$0.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="display: none"
valign="middle"
nowrap=""
align="center"
>
+
</td>
<td
style="display: table-cell"
valign="middle"
nowrap=""
align="center"
>
Test
</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap="" align="center">+</td>
<td style="display: none" nowrap="" align="center">
-
</td>
<td width="60%" nowrap="">Jointly/Severally Fees</td>
<td width="110px" nowrap="" align="right">$0.00</td>
<td width="85px" nowrap="" align="right">$0.00</td>
<td width="85px" nowrap="" align="right">$0.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>

Edit:
Here I have the same result in Chrome, Safari, Opera and Firefox
body{
position :absolute;
}
table{
border-collapse: collapse;
}
#mainContainer{
height:180px;
overflow-y: scroll;
}
#detailFee {
background: window;
height: 100%;
width: 100%;
overflow: auto;
border-style: inset;
border-width: 1;
border-color: lightgray;
box-sizing: border-box;
}
Try to put the main table inside a "mainContainer" div like this...
<div id="mainContainer">
<table
width="800px"
height="180px"
style="background-color: lightblue; border-collapse: collapse"
>
And at the end of your html :
</table>
</div>
</body>
</html>
Have a nice day.

html table width not consistent

I'm having issues whereby my html table cell width are not consistent. I understand it's because of using colspan. Any way I can achieve to make the table cell consistent?
Sample jsbin:
http://jsbin.com/lozajiyeqi/edit?html,output
<tr>
<td class="noborder" width="100"></td>
<td nowrap="" bgcolor="#E5FADD" colspan="2" width="200" rowspan="1"> D1-09-08 </td>
<td nowrap="" bgcolor="#E5FADD" colspan="2" width="200" rowspan="1"> D1-09-18 </td>
<td nowrap="" bgcolor="#E5FADD" colspan="2" width="200" rowspan="1"> D1-09-28 </td>
<td nowrap="" bgcolor="#E5FADD" colspan="2" width="200" rowspan="1"> D1-09-38 </td>
<td nowrap="" bgcolor="#E5FADD" colspan="2" width="200" rowspan="1"> D1-09-68 </td>
<td nowrap="" bgcolor="#E5FADD" colspan="2" width="200" rowspan="1"> D1-09-88 </td>
<td nowrap="" bgcolor="#E5FADD" colspan="2" width="200" rowspan="1"> D1-09-98 </td>
<td nowrap="" bgcolor="#E5FADD" colspan="2" width="200" rowspan="1"> D1-09-108 </td>
<td nowrap="" bgcolor="#E5FADD" colspan="2" width="200" rowspan="1"> D1-09-118 </td>
<td nowrap="" bgcolor="#E5FADD" colspan="2" width="200" rowspan="1"> D1-09-128 </td>
<td nowrap="" bgcolor="#E5FADD" colspan="2" width="200" rowspan="1"> D1-09-138 </td>
<td nowrap="" colspan="2" width="200" rowspan="1"> D1-09-168 </td>
<td class="noborder" width="100"></td>
</tr>
Suppose highligthed cell is also having the same width and colspan. But why they are having wider cell?

How to use nokogiri to choose a table only if the text in the preceding p-elements contains a specific term?

I have a bunch of financial reports from which I need to extract a few specific tables. I have been using Ruby (and I'm fairly new to programming) to accomplish this and so far I've had good results using a keyword-matching system (matching terms in the tables). However I would like to use a second approach where the text of the p-elements above a table are screened for keywords and if a match is found the table should be put to a file. I've been searching all day (mostly playing with xpath (and this link REALLY helped: https://www.simple-talk.com/dotnet/.net-framework/xpath,-css,-dom-and-selenium-the-rosetta-stone/)) and unfortunately I haven't gotten very far. An example of the sheets I need to process is found here:
https://www.sec.gov/Archives/edgar/data/1583671/000106299315005260/form10k.htm#page_15
Take these p-elements with the associated Balance sheet table for example:
<p align="center"><b>SCIENCE TO CONSUMERS, INC. </b></p>
<p align="center"><b>BALANCE SHEET </b><br>
</p>
<table style="BORDER-COLOR: black; FONT-SIZE: 10pt; BORDER-COLLAPSE: collapse; " width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody><tr valign="top">
<td align="left"> </td>
<td align="left" width="1%"> </td>
<td align="center" width="12%" nowrap=""><b>May 31,</b> </td>
<td align="center" width="2%" nowrap=""> </td>
<td align="center" width="1%" nowrap=""> </td>
<td align="center" width="12%" nowrap=""><b>May 31, 2014</b> </td>
<td align="left" width="2%"> </td></tr>
<tr valign="top">
<td align="center"><b>ASSETS</b> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="1%"> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="center" width="12%" nowrap=""><b>2015</b> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="center" width="2%" nowrap=""> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="center" width="1%" nowrap=""> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="center" width="12%" nowrap=""> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="2%"> </td></tr>
<tr valign="top">
<td align="left">Current Assets </td>
<td align="left" width="1%"> </td>
<td align="left" width="12%"> </td>
<td align="left" width="2%"> </td>
<td align="left" width="1%"> </td>
<td align="left" width="12%"> </td>
<td align="left" width="2%"> </td></tr>
<tr valign="top">
<td align="left" bgcolor="#E6EFFF"> Cash and cash equivalents </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="1%" bgcolor="#E6EFFF">$</td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="right" width="12%" bgcolor="#E6EFFF">1,749 </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="2%" bgcolor="#E6EFFF"> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="1%" bgcolor="#E6EFFF">$</td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="right" width="12%" bgcolor="#E6EFFF"> 5,171 </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="2%" bgcolor="#E6EFFF"> </td></tr>
<tr valign="top">
<td align="left">Total Current Assets </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="1%"> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="right" width="12%">1,749 </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="2%"> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="1%"> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="right" width="12%">5,171 </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="2%"> </td></tr>
<tr>
<td bgcolor="#e6efff"> </td>
<td width="1%" bgcolor="#e6efff"> </td>
<td width="12%" bgcolor="#e6efff"> </td>
<td width="2%" bgcolor="#e6efff"> </td>
<td width="1%" bgcolor="#e6efff"> </td>
<td width="12%" bgcolor="#e6efff"> </td>
<td width="2%" bgcolor="#e6efff"> </td></tr>
<tr>
<td> </td>
<td width="1%"> </td>
<td width="12%"> </td>
<td width="2%"> </td>
<td width="1%"> </td>
<td width="12%"> </td>
<td width="2%"> </td></tr>
<tr valign="top">
<td align="left" bgcolor="#e6efff">Total Assets </td>
<td style="BORDER-BOTTOM: #000000 3px double" align="left" width="1%" bgcolor="#e6efff">$</td>
<td style="BORDER-BOTTOM: #000000 3px double" align="right" width="12%" bgcolor="#e6efff"> 1,749 </td>
<td style="BORDER-BOTTOM: #000000 3px double" align="left" width="2%" bgcolor="#e6efff"> </td>
<td style="BORDER-BOTTOM: #000000 3px double" align="left" width="1%" bgcolor="#e6efff">$</td>
<td style="BORDER-BOTTOM: #000000 3px double" align="right" width="12%" bgcolor="#e6efff"> 5,171 </td>
<td style="BORDER-BOTTOM: #000000 3px double" align="left" width="2%" bgcolor="#e6efff"> </td></tr>
<tr>
<td> </td>
<td width="1%"> </td>
<td width="12%"> </td>
<td width="2%"> </td>
<td width="1%"> </td>
<td width="12%"> </td>
<td width="2%"> </td></tr>
<tr valign="top">
<td align="center" bgcolor="#e6efff"><b>LIABILITIES AND STOCKHOLDERS’
EQUITY</b> </td>
<td align="left" width="1%" bgcolor="#e6efff"> </td>
<td align="left" width="12%" bgcolor="#e6efff"> </td>
<td align="left" width="2%" bgcolor="#e6efff"> </td>
<td align="left" width="1%" bgcolor="#e6efff"> </td>
<td align="left" width="12%" bgcolor="#e6efff"> </td>
<td align="left" width="2%" bgcolor="#e6efff"> </td></tr>
<tr valign="top">
<td align="left">Liabilities </td>
<td align="left" width="1%"> </td>
<td align="left" width="12%"> </td>
<td align="left" width="2%"> </td>
<td align="left" width="1%"> </td>
<td align="left" width="12%"> </td>
<td align="left" width="2%"> </td></tr>
<tr valign="top">
<td align="left" bgcolor="#e6efff">Current Liabilities </td>
<td align="left" width="1%" bgcolor="#e6efff"> </td>
<td align="left" width="12%" bgcolor="#e6efff"> </td>
<td align="left" width="2%" bgcolor="#e6efff"> </td>
<td align="left" width="1%" bgcolor="#e6efff"> </td>
<td align="left" width="12%" bgcolor="#e6efff"> </td>
<td align="left" width="2%" bgcolor="#e6efff"> </td></tr>
<tr valign="top">
<td align="left"> Loan from director </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="1%"> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="right" width="12%">8,891</td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="2%"> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="1%"> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="right" width="12%">8,217 </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="2%"> </td></tr>
<tr>
<td bgcolor="#e6efff"> </td>
<td width="1%" bgcolor="#e6efff"> </td>
<td width="12%" bgcolor="#e6efff"> </td>
<td width="2%" bgcolor="#e6efff"> </td>
<td width="1%" bgcolor="#e6efff"> </td>
<td width="12%" bgcolor="#e6efff"> </td>
<td width="2%" bgcolor="#e6efff"> </td></tr>
<tr valign="top">
<td align="left">Total Liabilities </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="1%"> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="right" width="12%">8,891 </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="2%"> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="1%"> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="right" width="12%">8,217 </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="2%"> </td></tr>
<tr>
<td bgcolor="#e6efff"> </td>
<td width="1%" bgcolor="#e6efff"> </td>
<td width="12%" bgcolor="#e6efff"> </td>
<td width="2%" bgcolor="#e6efff"> </td>
<td width="1%" bgcolor="#e6efff"> </td>
<td width="12%" bgcolor="#e6efff"> </td>
<td width="2%" bgcolor="#e6efff"> </td></tr>
<tr valign="top">
<td align="left">Stockholders’ Equity </td>
<td align="left" width="1%"> </td>
<td align="left" width="12%"> </td>
<td align="left" width="2%"> </td>
<td align="left" width="1%"> </td>
<td align="left" width="12%"> </td>
<td align="left" width="2%"> </td></tr>
<tr valign="top">
<td align="left" bgcolor="#e6efff"> Common stock,
par value $0.001; 525,000,000 shares
authorized, <br> 29,900,000 shares
issued and outstanding; </td>
<td align="left" width="1%" bgcolor="#e6efff"> </td>
<td align="right" width="12%" bgcolor="#e6efff">29,900 </td>
<td align="left" width="2%" bgcolor="#e6efff"> </td>
<td align="left" width="1%" bgcolor="#e6efff"> </td>
<td align="right" width="12%" bgcolor="#e6efff">29,750 </td>
<td align="left" width="2%" bgcolor="#e6efff"> </td></tr>
<tr valign="top">
<td align="left"> Additional paid in capital </td>
<td align="left" width="1%"> </td>
<td align="right" width="12%">61,100</td>
<td align="left" width="2%"> </td>
<td align="left" width="1%"> </td>
<td align="right" width="12%">16,250 </td>
<td align="left" width="2%"> </td></tr>
<tr valign="top">
<td align="left" bgcolor="#e6efff"> Deficit accumulated
during the development stage </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="1%" bgcolor="#e6efff"> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="right" width="12%" bgcolor="#e6efff">(98,142</td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="2%" bgcolor="#e6efff">) </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="1%" bgcolor="#e6efff"> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="right" width="12%" bgcolor="#e6efff">(49,046</td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="2%" bgcolor="#e6efff">) </td></tr>
<tr valign="top">
<td align="left">Total Stockholders’ Equity </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="1%"> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="right" width="12%">(7,142</td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="2%">) </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="1%"> </td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="right" width="12%">(3,046</td>
<td style="BORDER-BOTTOM: #000000 1px solid" align="left" width="2%">) </td></tr>
<tr>
<td bgcolor="#e6efff"> </td>
<td width="1%" bgcolor="#e6efff"> </td>
<td width="12%" bgcolor="#e6efff"> </td>
<td width="2%" bgcolor="#e6efff"> </td>
<td width="1%" bgcolor="#e6efff"> </td>
<td width="12%" bgcolor="#e6efff"> </td>
<td width="2%" bgcolor="#e6efff"> </td></tr>
<tr valign="top">
<td align="left">Total Liabilities and Stockholders’ Equity </td>
<td style="BORDER-BOTTOM: #000000 3px double" align="left" width="1%">$</td>
<td style="BORDER-BOTTOM: #000000 3px double" align="right" width="12%"> 1,749 </td>
<td style="BORDER-BOTTOM: #000000 3px double" align="left" width="2%"> </td>
<td style="BORDER-BOTTOM: #000000 3px double" align="left" width="1%">$</td>
<td style="BORDER-BOTTOM: #000000 3px double" align="right" width="12%"> 5,171 </td>
<td style="BORDER-BOTTOM: #000000 3px double" align="left" width="2%"> </td></tr></tbody></table>
So it should for example detect the "BALANCE SHEET" text and then write the table to a file.
This is what I have found so far:
output = File.open("output.htm", 'w')
htm = File.open( "a.htm", "r+" )
htm = Nokogiri::HTML(open(htm)) do |config|
config.noblanks
end
allelements = htm.xpath('//table | //p')
allelements.each_with_index do |element, index|
if element.xpath('//table//*[contains(text(),\'Balance\')]')
output.puts element
#if element.xpath('//p//*[contains(text(),\'Balance\')]')
#check next five elements and if one equals "table" then
#write that table to the output file.
end
end
Obviously this code is incomplete but even this doesn't work as the output file contains all the p- and table-elements which I don't understand (I would expect only the table elements to be put in the output file at this point).
So thank you for reading this post and any ideas/remarks are welcome!

I solved the problem after finding the nokogiri ".name" method which makes it a peace of cake. This code works:
require 'rubygems'
require 'nokogiri'
output = File.open("output.htm", 'w')
financial_file = File.open( "a.htm", "r+" )
original_financial_file_downcased = File.read(financial_file).downcase
downcased_financial_file = File.open("downcased_financial_file.htm", "w+" )
original_financial_file_downcased.each_line do |line|
downcased_financial_file.puts line
end
downcased_financial_file.flush
nokogiri_cleaned_financial_report = Nokogiri::HTML(open(downcased_financial_file)) do |config|
config.noblanks
end
allelements = nokogiri_cleaned_financial_report.xpath('//table | //p')
allelements.each_with_index do |element, index|
if element.name == "table"
number_of_p_elements_to_assess = 5
number_of_p_elements_to_assess.times do
if /balance sheets/i.match(allelements[index-number_of_p_elements_to_assess].text)
output.puts element
end
number_of_p_elements_to_assess -= 1
end
end
Thanks to everyone who bothered to read the post.
Regards,
Usui

Set Numbering <li> to top

Currently I have this output for my <li>
How can I move number 3 to top?
My expected output:
I have tried with these codes, but not success. Anyone can help me solve this problem?
<ol>
<li>Namakan kenderaan malaysia
<br>
<br>
<table width="80%" border="0">
<tbody>
<tr>
<td width="10%"><b>i)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>ii)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>iii)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>iv)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
</tbody>
</table>
<br>
</li>
<li>Suatu hari ahmad <span style="text-decoration: underline"> a </span> pokok besar di tepi jalan. Ahmad berlari kerana <span style="text-decoration: underline"> b </span> Ahmad
telah diselamatkan oleh bapanya. Ahmad berasa <span style="text-decoration: underline"> c </span>
<br>
<br>
<table width="80%" border="0">
<tbody>
<tr>
<td width="10%"><b>a)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>b)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>c)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
<div style="
display: inline-grid;
">
<img class="img-responsive" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8PDw8NDRAODw0NDQ0NDQ0NDQ8NDg0OFREWFhURFRUYHSggGBolGxUVITEhJSkrLi4uFx8zODMsNygtLisBCgoKDg0OFRAQFy0dHR0tLS0rKy0tLS0tKysrKy0tLS0tLS0tLSstKy0tKy8tLS0tLSsrLS0rLi0rLS0tLS0rK//AABEIALEBHAMBEQACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAABAwACBAUGB//EADYQAAICAQMBBgUCBQMFAAAAAAABAgMRBBIhMQUTQVFhcQYigZGhFDIjQnKxwTNS8Ac1c9Hh/8QAGgEAAwEBAQEAAAAAAAAAAAAAAAECAwQFBv/EAC4RAQEAAgEEAAQDCAMAAAAAAAABAhEDBBIhMRNBUWEFInEUMlKBkaGx8MHR4f/aAAwDAQACEQMRAD8A4qR9a+PHAEIgOACyQgKQEskILJCC+AIcCApASCMQJMAEwAFIRmwRNDXSZZHG2uRjY1laITM7FynwmZ2NJWmuRlY1laq2ZVrD4EVpDESqLZEpMgNqykMtlSkVIm0icjSRnaRKRcidlykVIW1HIehtRsei2q2B7TIG8Ij3nliILJAFkhEKQBZIRLJCCyQAUhEskICATAGmAJAA4ALRRNpnwiRaD4EUzozIsVKZGZFipWiqwjKLlbaZmGUb41sqkY2NZT4yIsaSmKROl7HcLR7ByDQ2rKRWitJnIqRFpE5GkiLSZSKkTsuUitFstyK0NhkNDYNhow3Bo9vFYPbeaKQEskILJABSES6QgKQiWSACAFIQEQQAgBAApADIk0GxIpr7haAqQaG14zJsM+uZFi5W2iwwyjbGttdhjY2laIWGVjSU1TJ0uUdwtHtHMehtSUx6LZM5FyJtInMuRFpUpFaTtRyK0NqOQ9FtVyHobTIaPYbgPbyCR7DzxSEFkgCyQiWSEBSESwAUAEQEQEAgBMABwAFIQXQgsmIDkWgKYBZMRn1szyVGuqRllGuLVXMysaytEJmVi5TozIsaSrbxaVsHMehtVzHpOypzLkTazWWGkxZ2lOwrRbDcGhsMj0NpkBtMi0pBm8okeq4RSES6QiFIAskICAFIRLJABEaAQ4ACkBxAAgQoVAiCCCAFkBnU1uTUYpylJ4UYptt+SSIysk3Txlt1PNdvs74f1Fk9rrlUlzKdsXFJenm/RHFzdZxYY7l3+jt4eh5s8tduvvXp6PhjTxSUt85eMnLb9kjy8uv5bdzUevj+G8Umru1XtH4eU7E6tlVaglLhtuWX0j7Y8SuLre3H827U83Qd2e8NYwYfDcEubJt+aUYr7ck3rsv4Tn4djrzlWfUdiSil3Uu8ecSWFDHrls0w6rG77ppln0WWOu27/sU+yL8dIe2/kr9p40/snL9v6sOohKuThNYkvDh8efB0Y2ZTcc2cywuspqkSmXpnsmcy5E2s05GkjO1RSK0na2SVbTIGGRhZMSomRG8wkeo4lkhEskAFIQECFIQWACIDgAIBAJAMQCABJIQMRBEAd74Y7BWrlLvJShCCi8KLzZl84b4X/wBODrOrvBJ2zdv9nf0XR/tFvddSf3e9q7Ppo2qmuEMLGVFbn7y6s8LLm5OTdzytfQ4cHHxamGMjTs4zH7GW2ww/KEEseF6hAWo+bK2Wlq+fRL8ipwX6ATz3xNpLJSjOuuc1txKUfmxjwwunXqeh0fJjJZldPM67iyuUyxx281OeOH1XgelI8q0mcy5CtJnIuRnapuHoGRZNiosIwA0A4OQN5xI9FxLIQWAIBCkILIAOBAQIQCCAgEA0ACAQRCgNp0GinfZGqtZlLx8Ix8ZP0Rly8uPFhcsmnFxZcucwx917vsz4e0+nWXHvrM57yyPC/pj0R4PP1vLy+Je2fSPoen/D+Li82d1+tdrS2Ylz0/scWUd+J+pfK8sE4qpcbcBYNm0vOX7Cois3lhDVxkey0dCOFgRptDYUm8eQ4VYO0+zKtRF70lPHy2pYnF/5Xozfh58+K+PX0c3P02HLPM8/V8/1MJVylXNYlBuMk/M9/CzKTKeq+bzxuNuOXuM0pmsiNqqQwbBkVUNIWgGAzgiN59I9FxLCAgQpCAgFkhAQJMCAgEAIAEQQAgBAAgH0j4K0MYaNTSXeXuUpSxzhNqK9sL8nzn4jy3Ln18sX034ZxTHgmXzy/wBjoSt8PLwOTTu2MZoVM5zTjh9V0ZHpTLbZt6iyy1DkSPaMI7YN4c5YT8M+RnnyzGzbTHiyyl18nRjA0ZilgAsnwIKyk+PUcKh3Y9jQNLPPh4JZAnzf4j1Ks1Nk1CdeWlKNnEspYzjw4S4Po+kwuPFjLZf0fMdZnM+bLKSz9XKydTl2tFCpw+CIq4aQsGAAZpkR7cNI9BxpgRLJABwILYAkwICAQAIEgGmBAQCAEACAdnsPs2E/4lz4ylXDGdzz1focHV9Rlj+XD+del0PSY5/n5PXyn1e00eosjiKU+Fwtsuh4meMvl7+Ns8OlClSW6cUn5qX/AKMLdeJWuti9LDza/It09Qn9K3lKT5TSaj0/IrNw5fLzdlGsokoWbZ1ytXzqUcKp/uaUurSy2n9MnFlLhO3f/r0LeLk8yORDVWafVqq9qStjaobbVKvCm1vxjrtaeOfHyyPOS8dyw86/5a4Yd0njT6FoMd1Bxk5RcU1J9Xk6OO7xledyyzKyzR2DRkrLgYCmD5cvovQMrBIbkk1Or4GTi/FPYq1FTlBfx603W11mvGH18PU7ei6n4Wer+7ff/bg6/pZzYbxn5p6/6fOkv+Phn0L5s+uBFq4fGJna0kHAGqwJRsZ7V3D0HJSOxyrJASyQgOACYAkwATAEOBGmA2WhwBoIkAIATABZR8uoth9C7E7P7jZB82bUpN44eMtL2PnOo5viW2en1nTcV48ccb7d21rhZOOOunV2Lb7ImzyralW19evr0HdwvZssLoSbm9uaadlDVWO9jlwzLY08NcPwZly8ffJI34M8cct5enzTX1X1Qr/VU2QdKgu8wnFPavm3R49Gg+FZll2+q9OdRx63L5fQPhTVOWmi5J7V+3PXb1z+RcEsxsvyrzepsvJbPm7Xeo2c4ppgFnNBoAxhE8dAAOeUGifOfiqiMNZZt43xhZJdMTa5++M/U+i6HK5cGO/l4fM9fhMeoyk+fn+d/wB2w1m9c+JqIaIwCkhxNImy5CLyVobYEdLmWQiWQgIggwgiTABACABAIATAbA4FsCkAMriRldTyvDG5ZTGe69t2b21OUczrirOP4sOMv+k8Dl4JL4vj6PrOPO2eff1daGocsOSWfQ5rjr03nlu00dyz4dPcyyVEshtYbI2iPi/oKqjN2jY0nt8A+Qnt857Z7S1Vlr0lFcpyt+TCjug03hpv+VYy8+hnx491u7r7Oi2SPcaCtUQr08mnYq05+Tk+ppjJj4c+VuXltr0/80H7xbyvoZ/Dky3D7tzydFtdTRI9RgdwaCsn5DhUYdMNe4B8z7a07q1NtblKW2S2ynJyk4tJxTb5eE0vofS9NnM+LHLWnynU4XDmzx3vX1JrZdZw5MjTSVMiPakmVE0iZcJTA9hhwdLnWSES2CQmAJAAgEAIAQAKQgOACABwAFIRtGmxlZMebdxunV0eWOPLLk9J2dDmKPH5L7fR4u7nBy1vHU7PtTgo5WVngwzl2uVbUzz8q92/IMYKS7tqzkeijnz7VW75oOUW8cR59+vQNaVoLtQlJd3BRbjJppJN4Xiy5JEea812fHUwtlbObslZJu3fypPjD9MJY4Mfzb3W3jWnrNDrpcKSX0yXraPTdPUxSy8+yWRdtLaleqjLp9schotmKafRAa20ArJ46BCfOfimxvWXZWNvdxXtsi8/k+j6LHXBj99/5fMdflvqM/tr/Ec+EjoscspqmRpWx3C0rYNjCgxAwCmLuzo7nKsoi2SYEEwMgwAHABMAEwATAAQCAEACAEQNrZGU2rG6u47Gl1Mnjwa6YPL5eOY2x9L0/LeTCZWe3Wq1U5cvDx5o5LjI65T3rJLpx7Lkz7YuVNPZOU8uUvN5b5FoN+3JFOCqUIzY1J7F4qNuP+fcQZZabDYxs2uGABmOvoFQjgn6PzQGNdzXyy+/RoO0bZO0O09Vp0pKpamnlylH+HZBeGUs590jo4eDh5fFy7L/AFlcnPz8/D5mPfj/AEs/ztgr+NaZf6lFseOHCcZZfl4HRfwvknrKOWfjHHfeFeO1eolbZO2bzKyTk/8AC+iwvoexx4TDGYz1HiZ8lzyuWXuqKRWk7WUydK2t3gaPYOwNHsO8DRyp3gtK2jRUYVXA0o0AVaGAGSAEwATAEgGgEIBACCNABkGTQ26W3B5/Pj+Z9D0WfdxYu5o5pxOLOO6HrHVmel7Wq1CjJPw6P2FYbrUS3ftw/ZmWU17OVaU0s56+SFo1aL2pJvz48kvILPBtsqoz/a1n/a+qI3r2NEuiSfKfv4FbhaqXx+TK/wByTCex8ldPHd9OoW6E8qa54kvVf2Hh6LJfTS3cZwwymhHlPjbsuFMq7q0o965RsiuE5pZ3JeGfE9f8N6jLOXDL5ev0eF+KdPjx5TPHx3e/1eYPTeUgwmRGm4NBVyHo1dw9GG8NG1GaKmBkAEGA2E2hsh2hsJtDYBoewrgCTAAQNAJMAaYALIQPq8DLPGX224ubPD926dDSyxnDaz15PO5pJX0PS55Zccyy910Kcvls58nTDdpC165YYtBtollfciwbNyTo9qXzzj0HIQ0tv5W3h8dfEKG/ST3RdUv3Z+V+ePAzymrs558LU/LLD4zx9QvmHPFYdbrKndHTuW23CcG/2vP8vo+PybYcOfw/ia3HPlz8fxfhW6pn6K2OW2opcuUmkkvPJPfjfDS42eb4eM+I+1HqLFFSUq6cxhJdJvxn+D3Oj6f4WG7PN9/b7PnOu6r4+fj1PX3+7k4OtxpgAqxhVjCrAwGaozdKNZz2lozuSe4+1R1D7k9qriPZaDAyTAAGgJVoolcDCAEAJgQTAAUgCyQgbWTVxsoWHnwyvocPNj83tdFzyycd9xvrsw1FdTluO3o90ntpjMzsabDcLQ2ZRc4+qfVCsDV+oTXTkntG0k+RaNoo8yaZs3zlcPr9Qk8ElvaSS/iqLius8Pcl9OrHjxW3WKc+WYy5Zeo8j8Qaqu63fVGUUkk3J5lJ+foez0nFlx4ayu3zvW8+PNyd2M059+pts/1LLJp4ypTbTx046HRjhhj+7JHNnyZ5/vZWkqBe0LKAtmjrDuGi5QKlGimitkrtHs02hs4ndhtTsVQOTKqkaNhnteipwLlRYzzgXKzsKaLRVRkjAKtDIMDAYACAQAmBBZIAZGBNq5D66jO5LmLZRWzHKyt8JZdxtppwnhYbT58TnunZM8srLldqb+Hnqk/oY3F6kylVrk2t3hlperQrDmXnS8bBaVtbvhdo20R1KfV8i7Bs6rUpeJNwFzkm6fZqU+fRfhYF2WeC+JMpuORr9WprbB5WeWvNeB2dPx6/NXm9bzbnZP5uVKrJ3TJ5faH6cO8uwHp2HeOwHVgfcO1VxHsaKnEqVOiZRLlLQbB7Gl4Vk3JchyqI7l6bq4GNpyHpGe1aVlAcpWFSqLmSLiROkuZIuJTqL7kXEO7HstBsDY0q4j2WlXEeyDAyTAgsohs9G115ItXMWymkxyybY4NlWnMcs2+PG1V0GVzbTBqhWZXJtMQv0kZp54bWNy4Ypk1xyuPoO4goqGPlXTz9w9l32XbLbpY+Da+xch/tFnyZ3TzzLPpjBcwRn1d14hbqfg/uP4ZY9Z9YdTW/P7C7ZBl1NympFO1KZSosUc7tkmsea5HNW6+rLG5TX2cX4W1HexnHq8RsXpnhr7r8kcF7cbL8q16vj3ccp83ejpTW8jlnGatIT8RfwlZ6Uc5CvGx3UYNcc2OWDJOBtKxsJlEvadFygVKWlVEewbBEVcMyStuiY0zESocAAaAtFSiVKiwmcS5WdijiVtKrQ4RckVCpbRUqdK4GSJAF4Im1Ua6IGWVbYx0tPUc2eTqwxbYQMLXRMTESsd6DQ7opO4cxK5s9moNJgxy5GWzUG0wY5cisXkd8FLtpqpyZZZtccGyrTmOWbpx4z1QZ97WcT53pIvQ9qypeVVObx5d3Zyn9H/Y2t3d/xT+/+/5XMe7Ht+j6IqTHuR2Ld2LuPsLsrKmScsXP1MDowrl5I51kDplcthTrK2WiZxLlTYS0UgMj0aneD7T23RvMbiXcZG4XYrvX70ntPuTvQ7R3FysKmKLkW5laTaq2PRbBjIGgLSrgPZaLcStloMAF4ipxs0zMc22FdXTs5M3bhWncZabbKstwXMWeWemeWoNJgyvITO4uYIuZMptmkmmdtqV1titOY7bqKTDLJ0YYOhTA58q68MWmCMq3kNRLR4r/AKiaXY9PrUs7JOi3HXbJfK/vn7m2H5sLPnPJY3tzl+r0XYOt7/TVW/zOCjL+pcMnOeRlNXTdKQtIuRNky5GWWTn6mZ0YRy51z7JHRI57SpTRUiNkTmXIm0mTLiSrGVIROSy2fGROmaykxaPZkZMmw9r5J0aDAqItlpeNYrVSGKknuV2rqgXefYjoF3jsKlQXM03AqVJUyRcVHWVtOjqTPJpi6enkc2cdeFPczPTW5MtszXGMMqzyZrGW1QBsIE2rxjTXAytbYxprMq2xaoSM7G2NNUyNNJkt3gtK7nP+INKtRpb6fGVb2/1rmP5RpxeMoWWXh5T/AKddpPbZp5eHzxXk+kkVlh7l+S+W+Jk9fZcEwcmXIz2XmkwZXkYdRcb4YsM83PttOiYue5EytL7U9yjsHotg5j0NlTkVINkuZeg3RiYbHasoBsdpkIE2nIcoEWq7RUBbHaZGsVyVMToVkXJcwOjWRclzAxQJ2rtRwDY7S5VlSpuJUqipki4FTqLmSLgrGsLkJi018GdbYwyUiZFVnskaYxlkTktmMWI40QZFaw5SI00lXjYTcVSnwsM7GkpneE6X3J3gdp9w96HaO58507/SdqWQXEHbuj/RZz/k3zn5pf4o3x/Pxa+n/D2ltpUxeblWedhcjO1luka4xnkyTNoypUiiUbK0SrY9GXOQ5BpmlZyaaVp3InFVmIQXiIGRJql4kqhsCacOgZ1pDkQtYADAlWUSsgBMy4iqFFDIkqgMARYXiyyKLQshU4fAzrXEwShiKqjRWZ1pDCTVYBVjKvAfFH/cof8Ajq/ubZfu4fzdnS+snr5f4RUeZfZci4hmtNIis8y4zpUiyLZZKgCbSopkl1NYuP/Z"
style="max-height:400px;/* display: inline-table; */">
</div>
<br>ssasa
<br>
<table width="80%" border="0">
<tbody>
<tr>
<td width="10%"><b>i)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>ii)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>iii)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>iv)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>v)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Apakah kesan jika pagar besi dicat?
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Pagar itu akan berkilat</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Pagar itu tidak akan menyerap haba</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Pagar itu akan tahan lebih lama</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Pagar itu tidak akan menyerap air</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Pilih objek-objek yang boleh diletakkan dalam tong kitar semula berwarna jingga.
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Cermin tingkap, bateri, pakaian</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Gelas minuman, telefon mudah-alih, tin susu</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Botol air mineral, tin minuman, baju hujan</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Periuk tanah liat, spring, suratkhabar</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Manakah objek <strong><em>tidak</em></strong> boleh menyukat jisim?
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Neraca mampatan</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Neraca tuas</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Neraca elektronik</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Jam matahari</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Julia mempunyai 10 m reben. Dia menggunakan 1.5 m daripada reben itu untuk membuat sekuntum bunga.
<br>Berapakah kuntum bunga yang telah dibuatnya jika baki reben itu ialah 1 m?
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>4</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>6</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>5</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>7</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Manakah antara berikut sesuai untuk mengukur panjang papan putih?
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Kaki</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Depa</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Jengkal</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Hasta</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Manakah tumbuhan yang melindungi diri daripada dimakan haiwan dengan cara yang sama?
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Pokok keladi, pokok tomato, pokok durian</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Pokok getah, pokok betik, pokok nangka</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Pokok mangga, pokok pisang, pokok jagung</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Pokok bunga raya, pokok bunga ros, pokok nanas</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Manakah antara berikut <strong><em>bukan</em></strong> inferens bagi manusia untuk membiak?
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Untuk memastikan kemandirian spesisnya</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Untuk mengekalkan bilangan mereka</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Untuk mengekalkan keseimbangan alam</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Untuk menambah bilangan mereka</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Bagaimanakah nikotin dalam asap rokok menjejaskan kesihatan manusia?
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Memusnahkan sel-sel dalam paru-paru.</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Menyebabkan barah tekak dan paru-paru.</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Memusnahkan sel darah merah.</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Menyebabkan lelah dan bronkitis.</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Pilih tujuan penyiasatan di mana ikan diletakkan dalam tangki bertutup.
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Untuk menunjukkan bahawa air ialah keperluan asas ikan.</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Untuk menunjukkan bahawa ikan boleh disimpan dalam tangki bertutup.</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Untuk menunjukkan bahawa udara ialah keperluan asas ikan.</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Untuk menyiasat sama ada ikan memerlukan makanan untuk terus hidup.</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Mengapakah manusia purba tinggal dalam gua?
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Untuk mendapat perlindungan daripada hujan, panas matahari, dan musuh.</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Mereka suka tinggal dalam gua.</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Untuk bersembunyi daripada hujan dan panas matahari.</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Untuk mengelakkan musuh.</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
</ol>
Please refer to my fiddle

Try this:
li > div {
display:inline-block; /* not inline-grid */
vertical-align: top;
}
JSfiddle Demo

.. display: block; makes the element somewhat: 100% width and not act like an list-item so appears out of list. There are more elegant solutions.
i use the gt-selector > to be sure only the direct children are affected.
li > img {
display: block;
}
<ol>
<li>
<img src="http://lorempixel.com/400/200">Whatever you say, don't do it!</li>
<li>____</li>
<li>____</li>
<li>____</li>
<li>____</li>
</ol>

Why is there space under my image? [duplicate]

This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 8 years ago.
Notice in the following screenshot, there is a white space under image:
I don't understand why there is this gap, how do I remove it. The page is live at http://goo.gl/Kf8FV5
Markup:
<section id="pricing-table">
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="10"> </td>
<td width="760" height="10" colspan="4" align="left" valign="top"><img src="images/membership-plans-design_03.png" alt=""></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
<td><img src="images/membership-plans-design_08.png" alt=""></td>
<td><img src="images/membership-plans-design_09.png" alt=""></td>
<td><img src="images/membership-plans-design_10.png" alt=""></td>
<td><img src="images/membership-plans-design_11.png" alt=""></td>
</tr>
</table>
</section>
Css:
#pricing-table { margin: 0 auto; width: 950px; text-align: center;}
.featureset {
background-image: url(images/membership-plans-design_05.png);
background-repeat: no-repeat;
height: 42px;
margin: 0;
padding: 0;
color:#FFF;
}
.featurehead {
background-color:#CCC;
font-weight: bold;
border-bottom: 1px solid grey;
}
Any help is highly appreciated. Thanks in advance.

Images are inline elements, so they have a white space after them (like a <span> element). To remove that white space, change them to block elements like this :
img{
display:block;
}

Change <img src="images/membership-plans-design_03.png" alt=""> to
<img src="images/membership-plans-design_03.png" alt="" style="display: block;">
And to be more precise images are an inline-block element.

Add this to your CSS,
section#pricing-table td img{
display: block;
}

<img> is an inline-block element by default. You can remove the white space around it by setting it's parent's font-size to zero, or by changing it's display property.
JSFiddle Demo