html table width not consistent - html

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?

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.

Print page borders on a multi page output using wkhtmlltopdf

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;}

HTML table fit cell height to contents valign top

I am trying to create a table where the left column is pushed top to fit its contents. Note that the right column requires to be height=300.
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="3" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 3rd cell
</td>
</tr>
</table>
This is what I have come out so far: https://jsfiddle.net/5y33rtm3/1/
Desired outcome:

You can add rowspan="5" for the third row in the left:
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="7" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" width="65%" rowspan="5"> <!-- CHANGED HERE -->
This is my 3rd cell
</td>
</tr>
</table>
or you can add height: 100% to it:
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="7" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" width="65%" style="height: 100%"> <!-- CHANGED HERE -->
This is my 3rd cell
</td>
</tr>
</table>

<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="3" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" style="height:100%" width="65%">
<img src="ant.jpg" style="height:40%;width:40%;" />
</td>
</tr>
</table>

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,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"
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