Proper width Alignment of child table inside parent table in HTML - html

I have created a collapsible HTML nested table.
But i am not able to set the proper width after so many futile efforts.
My child table is not fitting to my parent table's head.
Here is the code snippet:
https://jsfiddle.net/preetigupta617/bpLkdx13/
Code:
HTML
<head>
<script>
$('.content').css('display','none');
$( ".collapsible" ).click(function() {
id = $(this).attr('id');
num = id.split("_").pop();
// document.getElementById("mytable_"+num).classList.toggle("show");
if(document.getElementById("mytable_"+num).style.display=='none') {
document.getElementById("mytable_"+num).style.display= 'block';
}
else {
document.getElementById("mytable_"+num).style.display= 'none'
}
console.log(num);
console.log(document.getElementById("mytable_"+num).innerHTML);
</script>
<style>
table {border-collapse:collapse; table-layout:fixed; width:310px;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
/* Style the button that is used to open and close the collapsible content */
.collapsible {
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<table style='width:80%;margin:0 auto;' border='1' bordercolor='BLACK'>
<thead >
<tr class='w3-cyan'><th>S.no</th><th>Command</th><th>Failure Reasons</th><th>Testcase Affected</th><th>Response</th></tr></thead>
<tr id='myBtn_1' class='collapsible'><td>1</td><td colspan=4>build_model</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_1' class='content' colspan=3><table>
<tr><td>MACHINE_ERROR,OTHER_INFO,WARNINGS,PATTERN_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/build_model-MACHINE_ERROR-OTHER_INFO-WARNINGS-PATTERN_VAR'>1</a></td><td> Regold</td></tr>
</table></td></tr>
<tr id='myBtn_2' class='collapsible'><td>2</td><td colspan=4>build_testmode</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_2' class='content' colspan=3><table>
<tr><td>OTHER_INFO,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/build_testmode-OTHER_INFO-COVERAGE_VAR'>1</a></td><td> Open CCR</td></tr>
<tr><td>CORE,TESTCASE_ERRORS,CRITICAL_ERRORS,MACHINE_ERROR,PATTERN_VAR,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/build_testmode-CORE-TESTCASE_ERRORS-CRITICAL_ERRORS-MACHINE_ERROR-PATTERN_VAR-COVERAGE_VAR'>1</a></td><td> Fix Testcase</td></tr>
</table></td></tr>
<tr id='myBtn_3' class='collapsible'><td>3</td><td colspan=4>commit_tests</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_3' class='content' colspan=3><table>
<tr><td>MACHINE_ERROR,WARNINGS</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/commit_tests-MACHINE_ERROR-WARNINGS'>1</a></td><td> Rerun</td></tr>
</table></td></tr>
<tr id='myBtn_4' class='collapsible'><td>4</td><td colspan=4>create_logic_tests</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_4' class='content' colspan=3><table>
<tr><td>CORE,OTHER_INFO,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/create_logic_tests-CORE-OTHER_INFO-COVERAGE_VAR'>1</a></td><td> Regold</td></tr>
<tr><td>CORE,CRITICAL_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,PATTERN_VAR,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/create_logic_tests-CORE-CRITICAL_ERRORS-MACHINE_ERROR-OTHER_INFO-WARNINGS-SEVERE-PATTERN_VAR-COVERAGE_VAR'>1</a></td><td> Rerun</td></tr>
</table></td></tr>
<tr id='myBtn_5' class='collapsible'><td>5</td><td colspan=4>diagnose_failures</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_5' class='content' colspan=3><table>
<tr><td>TESTCASE_ERRORS,CRITICAL_ERRORS,PATTERN_VAR,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/diagnose_failures-TESTCASE_ERRORS-CRITICAL_ERRORS-PATTERN_VAR-COVERAGE_VAR'>1</a></td><td> Rerun</td></tr>
</table></td></tr>
<tr id='myBtn_6' class='collapsible'><td>6</td><td colspan=4>verify_test_structures</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_6' class='content' colspan=3><table>
<tr><td>TESTCASE_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/verify_test_structures-TESTCASE_ERRORS-MACHINE_ERROR-OTHER_INFO-WARNINGS-SEVERE-COVERAGE_VAR'>1</a></td><td> Open CCR</td></tr>
</table></td></tr>
<tr id='myBtn_7' class='collapsible'><td>7</td><td colspan=4>write_toggle_gram</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td id='mytable_7' class='content' colspan=3><table>
<tr><td>CORE</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/write_toggle_gram-CORE'>1</a></td><td> Fix Testcase</td></tr>
</table></td></tr>
</table>
</body>
PS:You can also use the jsfiddle link i have given in post too.
The foldable HTML table is working in actual but not in jsfiddle site.
But i want help only in case of css,i.e i want to set the child table in last 3 columns properly.How can i achieve that?
I tried , but end up only scratching my head .
Thanks in advance !!
[Output with this current code]1


Here you are:
$(".collapsible").click(function() {
$(this).next('tr').toggle();
});
table {
border-collapse: collapse;
table-layout: fixed;
width: 80%;
margin: 0 auto;
}
th {
border: solid 1px;
}
table td {
border: solid 1px #fab;
width: 100px;
word-wrap: break-word;
}
table table {
width: 100%;
}
/* Style the button that is used to open and close the collapsible content */
.collapsible {
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.collapsible+tr:not(:nth-child(2)) {
display: none
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0;
overflow: hidden;
background-color: #f1f1f1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w3-card w3-round w3-pink">
<h1>
<center>Regression Results</center>
</h1>
</div>
<table>
<thead>
<tr class="w3-cyan">
<th>S.no</th>
<th>Command</th>
<th>Failure Reasons</th>
<th>Testcase Affected</th>
<th>Response</th>
</tr>
</thead>
<tbody>
<tr class="collapsible">
<td>1</td>
<td colspan="4">build_model</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>MACHINE_ERROR,OTHER_INFO,WARNINGS,PATTERN_VAR</td>
<td>1</td>
<td> Regold</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>2</td>
<td colspan="4">build_testmode</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>OTHER_INFO,COVERAGE_VAR</td>
<td>1</td>
<td> Open CCR</td>
</tr>
<tr>
<td>CORE,TESTCASE_ERRORS,CRITICAL_ERRORS,MACHINE_ERROR,PATTERN_VAR,COVERAGE_VAR</td>
<td>1</td>
<td> Fix Testcase</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>3</td>
<td colspan="4">commit_tests</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>MACHINE_ERROR,WARNINGS</td>
<td>1</td>
<td> Rerun</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>4</td>
<td colspan="4">create_logic_tests</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>CORE,OTHER_INFO,COVERAGE_VAR</td>
<td>1</td>
<td> Regold</td>
</tr>
<tr>
<td>CORE,CRITICAL_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,PATTERN_VAR,COVERAGE_VAR</td>
<td>1</td>
<td> Rerun</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>5</td>
<td colspan="4">diagnose_failures</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>TESTCASE_ERRORS,CRITICAL_ERRORS,PATTERN_VAR,COVERAGE_VAR</td>
<td>1</td>
<td> Rerun</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>6</td>
<td colspan="4">verify_test_structures</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>TESTCASE_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,COVERAGE_VAR</td>
<td>1</td>
<td> Open CCR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="collapsible">
<td>7</td>
<td colspan="4">write_toggle_gram</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="content" colspan="3">
<table>
<tbody>
<tr>
<td>CORE</td>
<td>1</td>
<td> Fix Testcase</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>


https://jsfiddle.net/g4Lo92zb/
I changed your HTML and JS.
You can collapse a row that uses less code, and makes it look neater.
Be sure when you set the display style property on your element, to set it to the valid display property value.
table display: table;
tr display: table-row;
td display: table-cell;

Related

Hide and show table inside table when check box is checked in pure css

I want to send mail with the below template from code. I am trying to hide and display the secondary table with the checkbox. I think I am stuck with the css selector. Is it possible to hide and show something with the checkbox. Important thing is I want to do it in only css , " NO JS " Here is the codepen edit link : https://codepen.io/rishisarma/pen/QWqyqXd?editors=1100
.box {
display:none;
}
<-- Here is the issue I think when I tried to hide and display the table it is not working.-->
input[id='trigger']:checked table.box{
display:block;
}
table {
font-family: "Trebuchet MS";
margin: 8px;
}
tr:nth-child(odd) {
background-color: #f7f7f7;
}
.rightalign {
text-align: right;
width: 125px;
}
th {
background-color: #e84f32;
padding: 8px;
color: white;
border: 1px solid #e0e0e0;
}
td {
padding: 8px;
border: 1px solid #e0e0e0;
}
<table>
<thead>
<tr>
<th colspan="9" style="width:100%;" id="head">Client Wise AttendenceReport (2021/12/05)</th>
</tr>
<tr>
<th></th>
<th>SRNO</th>
<th>Customer</th>
<th>Organizations</th>
<th>Attendees (2021/12/04)</th>
<th>Attendees (2021/12/05)</th>
<th>Txns (2021/12/04)</th>
<th>Txns (2021/12/05)</th>
<th>Inclination (%)</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="trigger">
</td>
<td>1</td>
<td>TSTS</td>
<td>33 (0%)</td>
<td>1605382</td>
<td>1605563 (0.01)</td>
<td>139313</td>
<td>20726</td>
<td>-85.12</td>
</tr>
<tr>
<td colspan="9">
<table class = "box">
<tr>
<td colspan="5" style="background-color: #e84f32; padding: 8px; color:white; text-align:center">Organisation Wise Transaction Report On 05-Dec- 2021</td>
</tr>
<tr>
<th>Slno</th>
<th>Organisation</th>
<th>Registered Users</th>
<th>Present Today</th>
<th>Percent(%)</th>
</tr>
<tr>
<td>1</td>
<td>TSTSATTENDANCE</td>
<td class="rightalign">294</td>
<td class="rightalign">3</td>
<td class="rightalign">1%</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>GVK</td>
<td>2 (0%)</td>
<td>1329</td>
<td>1329 (0)</td>
<td>681</td>
<td>686</td>
<td>0.73</td>
</tr>
<tr>
<td></td>
<td>3</td>
<td>SIL</td>
<td>33 (0%)</td>
<td>202240</td>
<td>203042 (0.4)</td>
<td>111348</td>
<td>7519</td>
<td>-93.25</td>
</tr>
</tbody>
</table>

Table Background Image Displaying in Front of Table

After adding a background image to my table, the image is displaying over the table and the contents of the table are hidden. Why is this? HTML and CSS code is below:
.muscles_worked {
background-image: url(images/dumbbell.png);
border: 1px dashed black;
margin: 0 auto;
margin-top: 50px;
}
<table class="muscles_worked">
<caption>Muscles Worked in this Program</caption>
<thead>
<tr>
<th>Part of Body</th>
<th>Day(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Legs</td>
<td>Monday</td>
</tr>
<tr>
<td>Friday</td>
</tr>
<tr>
<td rowspan="3">Core</td>
<td>Monday</td>
</tr>
<tr>
<td>Thursday</td>
</tr>
<tr>
<td>Friday</td>
</tr>
</tbody>
</table>

A better way might be to set the table in a div and set the background on that.
div.muscles_worked {
background-image: url('http://placekitten.com/700/500?image=13');
margin: 0 auto;
margin-top: 50px;
display: inline-block;
}
.muscles_worked > table {
border: 1px dashed black;
}
<div class="muscles_worked">
<table>
<caption>Muscles Worked in this Program</caption>
<thead>
<tr>
<th>Part of Body</th>
<th>Day(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Legs</td>
<td>Monday</td>
</tr>
<tr>
<td>Friday</td>
</tr>
<tr>
<td rowspan="3">Core</td>
<td>Monday</td>
</tr>
<tr>
<td>Thursday</td>
</tr>
<tr>
<td>Friday</td>
</tr>
</tbody>
</table>
</div>
Hope it helps. Cheers!

How can i achieve a table like this?

I tried using boxed elements but it is not coming in a proper way!
Any kind of help is highly appreciated
https://codepen.io/saisree/pen/EXXQGO - link to codepen
<table>
<tr>
<td class="text-center" colspan="4">Aircraft Status Display</td>
</tr>
<tr>
<td> spare</br>STBY</td><td><div class="vr"></div>
</td>
</tr>
<tr>
<td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;" class="boxed4 text-center"
><span class="br"></span></p>
</td>
<td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;" class="boxed4 text-center"
><span class="br"></span></p>
</td>
<td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;" class="boxed4 text-center"
><span class="br"></span></p>
</td>
</table>

Using colspan=n to make a column the width of n columns:
<table>
<tr>
<td></td><td colspan="6">this is wide column</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td colspan="6">another wide column</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>

It's not completely clear from your image what you are trying to achieve, but if you mean the "half-open" cells, here is an example.
It uses col-spans to merge several cells into one, and different border settings: First a default setting for all cells (for borders on each side), the therse are overwritten by additional CSS rules that have special CSS selectors (with pseudo classes) to only affect certain cells:
table {
border-collapse: collapse;
width: 60%;
margin: 0 auto;
}
td {
border: 1px solid #333;
height: 40px;
}
tr:first-of-type > td {
border-bottom: none;
height: 20px;
}
tr:nth-of-type(2) > td {
border-top: none;
height: 40px;
}
tr:nth-of-type(4) > td:not(:first-child) {
border-bottom: none;
}
tr:nth-of-type(5) > td:not(:first-child) {
border-top: none;
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="4" ;></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="4" ;></td>
</tr> <tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Making a wide table, collapse into rows on mobile

We have some product data that has varying table data. Sometimes there is 2 column, then perhaps 4. When there is 4 columns, it causes problems on mobile and doesn't fit with our responsive layout.
Can anyone help get the table to work better on mobile.
Here is the original table: https://jsfiddle.net/Lnjsv48g/
A guide I am using: https://css-tricks.com/examples/ResponsiveTables/responsive.php
Here is my responsive attempt: https://jsfiddle.net/f1z6czeo/
<table align="center" border="2" style="height:445px; width:761px">
<caption>Technical Information</caption>
<tbody>
<tr>
<td>Washer Speeds</td>
<td>Speed 1</td>
<td>Speed 2</td>
<td>Speed 3</td>
</tr>
<tr>
<td>Revs per minute squared</td>
<td>480m³/hr</td>
<td>600m³/hr</td>
<td>950³/hr</td>
</tr>
<tr>
<td>Extraction Rate ³/hr Recirculated</td>
<td>322m³/hr</td>
<td>402m³/hr</td>
<td>636m³/hr</td>
</tr>
<tr>
<td>Noise Levels DB/A</td>
<td>54 DB</td>
<td>57 DB</td>
<td>63 DB</td>
</tr>
<tr>
<td>Minimum Height of Product</td>
<td>No Less Than 650mm From Your Base</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>DPP Rating</td>
<td>D</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Backup Filter (Optional Extra)</td>
<td>Round 5 (2 Filters required)</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Light Options</td>
<td>2x 1.2w LED Bulk BBT299</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Marble Size (Marble Kit optional Extra)</td>
<td>125mm Minimum(150mm is recommended)(Up to 4 Mtr Only)</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Remote Control</td>
<td>No</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Warranty (Subject to registration)</td>
<td>3 years</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>BPP Scheme Colour Code</td>
<td>N/A</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>BOR Rand Filters (Cleaner Safe)</td>
<td>Y</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Box Type</td>
<td>3 Amp</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Gang Type</td>
<td>Toggle Control</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<table border="0" style="height:82px; width:273px">
<tbody>
<tr>
<td><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></td>
<td>Installation Guide<br>
PDF File - Opens in a New Window</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0">
<tbody>
<tr>
<td><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></td>
<td>Product Specification Guide<br>
PDF File - Opens in a New Window</td>
</tr>
</tbody>
</table>
</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

Here is an solution: look at snippet
#media only screen and (max-width: 760px){
table {
width: 100%;
border-collapse: collapse;
border: none;
}
table, thead, tbody, th {
display: block;
}
tbody, td, tr {
display: inline-block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr.techinfo {
border: 1px solid #aaa;
width: 100%;
background: #eee;
box-sizing: border-box;
}
.techinfo > td {
float: right;
width: 60%;
display: inline-block;
background: #eee;
padding-left: 3px;
border: none;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
}
.techinfo > td:first-child {
width: 39%;
float: left;
line-height: 4em;
}
.techinfo > td:nth-child(2){
background: #bbb;
}
.techinfo > td:nth-child(3){
background: #ccc;
}
.techinfo > td:nth-child(4){
background: #ddd;
}
.docs {
width: 100%;
border: none;
}
.docs > td {
width: 100%;
box-sizing: border-box;
background-color: #eee;
}
.docs > td > table {
box-sizing: border-box;
padding: 0 3px;
}
.docs > td tr {
border: none;
box-sizing: border-box;
}
}
<table align="center" border="2">
<caption>Technical Information</caption>
<tbody>
<tr class="techinfo">
<td>Washer Speeds</td>
<td>Speed 1</td>
<td>Speed 2</td>
<td>Speed 3</td>
</tr>
<tr class="techinfo">
<td>Revs per minute squared</td>
<td>480m³/hr</td>
<td>600m³/hr</td>
<td>950³/hr</td>
</tr>
<tr class="techinfo">
<td>Extraction Rate ³/hr Recirculated</td>
<td>322m³/hr</td>
<td>402m³/hr</td>
<td>636m³/hr</td>
</tr>
<tr class="techinfo">
<td>Noise Levels DB/A</td>
<td>54 DB</td>
<td>57 DB</td>
<td>63 DB</td>
</tr>
<tr class="techinfo">
<td>Minimum Height of Product</td>
<td>No Less Than 650mm From Your Base</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>DPP Rating</td>
<td>D</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Backup Filter (Optional Extra)</td>
<td>Round 5 (2 Filters required)</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Light Options</td>
<td>2x 1.2w LED Bulk BBT299</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Marble Size (Marble Kit optional Extra)</td>
<td>125mm Minimum(150mm is recommended)(Up to 4 Mtr Only)</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Remote Control</td>
<td>No</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Warranty(Subject to registration)</td>
<td>3 years</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>BPP Scheme Colour Code</td>
<td>N/A</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>BOR Rand Filters (Cleaner Safe)</td>
<td>Y</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Box Type</td>
<td>3 Amp</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Gang Type</td>
<td>Toggle Control</td>
<td> </td>
<td> </td>
</tr>
<tr class="docs">
<td>
<table>
<tbody>
<tr>
<td><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></td>
<td>Installation Guide<br>
PDF File - Opens in a New Window</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></td>
<td>Product Specification Guide<br>
PDF File - Opens in a New Window</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

i would suggest using text-align:center instead of padding:50% as this doesn't align very well.
That said, it does appear that your table re-renders at the appropriate size. What is it you are wanting it to do specifically? Could you mock-up an 'after' image?
Lastly, this may not be helpful for you if this is just a learning exercise, but a jQuery plugin exists to do exactly this: tablesaw

Help with html table layout

I want to show the below layout using html tables.
foo : jack
products : bag
bat
ball
shoes
blah : olah
I tried this but its not working as my expectations.
<table border="1">
<tr>
<th>row 1</th>
<td> Hello</td>
</tr>
<tr>
<th>row 1</th>
<td>
<table>
<tr>foo1</tr>
<tr>foo2</tr>
</table>
</td>
</tr>
<tr>
<th>row 1</th>
<td> Hello</td>
</tr>
</table>

Does this have to be a table? It seems that something like a definition list might be more appropriate to your usage, so I'd suggest the following as an option:
HTML:
<dl>
<dt>Foo:</dt>
<dd>Jack</dd>
<dt>Products:</dt>
<dd>Bag</dd>
<dd>Bat</dd>
<dd>Ball</dd>
<dd>Shoes</dd>
<dt>Blah:</dt>
<dd>Olah</dd>
</dl>
CSS:
dl {
width: 50%;
margin: 0 auto;
}
dt, dd {
font-size: 1em;
line-height: 1.2em;
}
dt {
width: 49%;
display: inline-block;
margin-top: 0.2em;
}
dd {
width: 49%;
display: block;
margin-left: 51%;
}
dt + dd {
display: inline-block;
margin-left: 0;
margin-top: 0.2em;
position: relative;
}
dt + dd:before {
content: " : ";
position: absolute;
left: -1em;
}
And the JS Fiddle demo.

Well this can be achieved by using rowspan

I think the problem is that, in your embedded table...
<table>
<tr>foo1</tr>
<tr>foo2</tr>
</table>
...you forgot to also wrap them in <td> elements:
<table>
<tr><td>foo1</td></tr>
<tr><td>foo2</td></tr>
</table>
But then, of course, you have the problem where the corresponding <th> is aligned in the middle of the table cell, instead of the top. But that can be fixed with the valign property:
<th valign="top">row 1</th>

<table>
<tr>
<td>foo</td><td>:</td><td>jack</td>
</tr>
<tr>
<td>products</td><td>:</td><td>bag</td>
</tr>
<tr>
<td><td/><td>bat</td>
</tr>
<tr>
<td><td/><td>ball</td>
</tr>
<tr>
<td><td/><td>shoes</td>
</tr>
<tr>
<td>blah</td><td>:</td><td>olah</td>
</tr>
</table>
Produces:
The key is that the colons are in a column of their own.

You can handle it using many way, but i just create it in quick way.
http://jsfiddle.net/dXU8D/
<table width="300" border="1">
<tr>
<td width="88">foo      : </td>
<td width="196">jack</td>
</tr>
<tr>
<td height="99">products : </td>
<td><table width="200" border="1">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td height="59">4</td>
</tr>
</table></td>
</tr>
<tr>
<td height="23">blah     : </td>
<td>olah</td>
</tr>
</table>
Or you can use rowspan to achieve this.
http://jsfiddle.net/Mzyzx/
<table width="300" border="1">
<tr>
<td width="88">foo      : </td>
<td width="196">jack</td>
</tr>
<tr>
<td height="99" rowspan="5">products : </td>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td height="23">blah     :</td>
<td>olah</td>
</tr>
</table>

<table>
<tr>
<td style="width: 70%;">foo</td><td style="width: 10%;">:</td><td style="width: 20%;">jack</td>
</tr>
<tr>
<td>products </td><td>:</td><td>bag</td>
</tr>
<tr>
<td colspan="2"> </td><td>bat</td>
</tr>
<tr>
<td colspan="2"> </td><td>ball</td>
</tr>
<tr>
<td colspan="2"> </td><td>shoes</td>
</tr>
<tr>
<td>blah</td><td>:</td><td>olah</td>
</tr>
</table>
one more example to be complete. http://jsfiddle.net/2ufsD/