How do I make table headers repeat when printed? [duplicate] - html

Is it possible in CSS using a property inside an #page to say that table headers (th) should be repeated on every page if the table spreads over multiple pages?


This is what the THEAD element is for. Official docs here.


Some browsers repeat the thead element on each page, as they are supposed to. Others need some help: Add this to your CSS:
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
Opera 7.5 and IE 5 won't repeat headers no matter what you try.
(source)


Flying Saucer xhtmlrenderer repeats the THEAD on every page of PDF output, if you add the following to your CSS:
table {
-fs-table-paginate: paginate;
}
(It works at least since the R8 release.)


UPDATE: It looks like this may have been fixed in 2016! https://bugs.chromium.org/p/chromium/issues/detail?id=24826#c45
Original Answer (2012):
Before you implement this solution it's important to know that Webkit currently doesn't do this.
Here is the relevant issue on the Chrome issue tracker: http://code.google.com/p/chromium/issues/detail?id=24826
And on the Webkit issue tracker: https://bugs.webkit.org/show_bug.cgi?id=17205
Star it on the Chrome issue tracker if you want to show that it is important to you (I did).


Chrome and Opera browsers do not support thead {display: table-header-group;} but rest of others support properly..


how do i print HTML table. Header and footer on each page
Also Work in Webkit Browsers
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function PrintPage() {
document.getElementById('print').style.display = 'none';
window.resizeTo(960, 600);
document.URL = "";
window.location.href = "";
window.print();
}
</script>
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the initial value */
margin: 2mm 4mm 0mm 0mm; /* this affects the margin in the printer settings */
}
thead
{
display: table-header-group;
}
tfoot
{
display: table-footer-group;
}
</style>
<style type="text/css" media="screen">
thead
{
display: block;
}
tfoot
{
display: block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 500px; margin: 0 auto;">
<thead>
<tr>
<td>
header comes here for each page
</td>
</tr>
</thead>
<tbody>
<tr>
<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>
6
</td>
</tr>
<tr>
<td>
7
</td>
</tr>
<tr>
<td>
8
</td>
</tr>
<tr>
<td>
9
</td>
</tr>
<tr>
<td>
10
</td>
</tr>
<tr>
<td>
11
</td>
</tr>
<tr>
<td>
12
</td>
</tr>
<tr>
<td>
13
</td>
</tr>
<tr>
<td>
14
</td>
</tr>
<tr>
<td>
15
</td>
</tr>
<tr>
<td>
16
</td>
</tr>
<tr>
<td>
17
</td>
</tr>
<tr>
<td>
18
</td>
</tr>
<tr>
<td>
19
</td>
</tr>
<tr>
<td>
20
</td>
</tr>
<tr>
<td>
21
</td>
</tr>
<tr>
<td>
22
</td>
</tr>
<tr>
<td>
23
</td>
</tr>
<tr>
<td>
24
</td>
</tr>
<tr>
<td>
25
</td>
</tr>
<tr>
<td>
26
</td>
</tr>
<tr>
<td>
27
</td>
</tr>
<tr>
<td>
28
</td>
</tr>
<tr>
<td>
29
</td>
</tr>
<tr>
<td>
30
</td>
</tr>
<tr>
<td>
31
</td>
</tr>
<tr>
<td>
32
</td>
</tr>
<tr>
<td>
33
</td>
</tr>
<tr>
<td>
34
</td>
</tr>
<tr>
<td>
35
</td>
</tr>
<tr>
<td>
36
</td>
</tr>
<tr>
<td>
37
</td>
</tr>
<tr>
<td>
38
</td>
</tr>
<tr>
<td>
39
</td>
</tr>
<tr>
<td>
40
</td>
</tr>
<tr>
<td>
41
</td>
</tr>
<tr>
<td>
42
</td>
</tr>
<tr>
<td>
43
</td>
</tr>
<tr>
<td>
44
</td>
</tr>
<tr>
<td>
45
</td>
</tr>
<tr>
<td>
46
</td>
</tr>
<tr>
<td>
47
</td>
</tr>
<tr>
<td>
48
</td>
</tr>
<tr>
<td>
49
</td>
</tr>
<tr>
<td>
50
</td>
</tr>
<tr>
<td>
51
</td>
</tr>
<tr>
<td>
52
</td>
</tr>
<tr>
<td>
53
</td>
</tr>
<tr>
<td>
54
</td>
</tr>
<tr>
<td>
55
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
footer comes here for each page
</td>
</tr>
</tfoot>
</table>
</div>
<br clear="all" />
<input type="button" id="print" name="print" value="Print" onclick="javascript:PrintPage();"
class="button" />
</form>
</body>
</html>

Related

How to make this table using only HTML (tr, td, rowspan tags), (NO CSS)

I am using this code but it doesn't seem to work. Help. It just doesnt seem to work however hard I try.
<html>
<head>
</head>
<body>
<table height="100%" width="70%" border="3">
<tr>
<td rowspan="1"> A </td>
<td rowspan="2"> B </td>
<td rowspan="3"> C </td>
</tr>
<tr>
<td rowspan="2"> D </td>
</tr>
<tr>
<td> E </td>
</tr>
<tr>
<td> F </td>
<td> G </td>
<td> H </td>
</tr>
</table>
</body>
</html>
The above HTML renders as this:
...but I want it to look like this:

It helps if you visualize the raw table rows in a diagram. I've indicated those in pink:
Then we can see that:
A - no rowspan, no colspan.
B - rowspan="2", no colspan.
C - rowspan="3", no colspan.
D - rowspan="2", no colspan.
E - no rowspan, no colspan.
F - no rowspan, no colspan.
G - no rowspan, no colspan.
H - no rowspan, no colspan.
Let's start with a normal table without any rowspans (using * to denote cells that will be merged):
I've added a CSS rule to set height: 50px on all <td> elements for the sake of illustration. It doesn't affect the table's actual layout.
tr > td {
height: 50px; /* min-height on <td> doesn't work */
}
<table height="100%" width="70%" border="3">
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
</tr>
<tr>
<td> D </td>
<td> B* </td>
<td> C* </td>
</tr>
<tr>
<td> D* </td>
<td> E </td>
<td> C* </td>
</tr>
<tr>
<td> F </td>
<td> G </td>
<td> H </td>
</tr>
</table>
Then let's add rowspans to the first row:
tr > td {
height: 50px; /* min-height on <td> doesn't work */
}
<table height="100%" width="70%" border="3">
<tr>
<td> A </td>
<td rowspan="2"> B </td>
<td rowspan="3"> C </td>
</tr>
<tr>
<td> D </td>
<!-- <td> B* </td> -->
<!-- <td> C* </td> -->
</tr>
<tr>
<td> D* </td>
<td> E </td>
<!-- <td> C* </td> -->
</tr>
<tr>
<td> F </td>
<td> G </td>
<td> H </td>
</tr>
</table>
Then let's add rowspans to the second row:
I've set different height values for each of the cells (in accordance to their rowspan), otherwise the middle row collapses (as there's nothing to prop it up).
tr > td {
}
tr > td.a {
height: 25px;
}
tr > td.b {
height: 50px;
}
tr > td.c {
height: 75px;
}
tr > td.d {
}
tr > td.e {
}
<table height="100%" width="70%" border="3">
<tr>
<td class="a"> A </td>
<td class="b" rowspan="2"> B </td>
<td class="c" rowspan="3"> C </td>
</tr>
<tr>
<td class="d" rowspan="2"> D </td>
<!-- <td> B* </td> -->
<!-- <td> C* </td> -->
</tr>
<tr>
<!-- <td> D* </td> -->
<td class="e"> E </td>
<!-- <td> C* </td> -->
</tr>
<tr>
<td> F </td>
<td> G </td>
<td> H </td>
</tr>
</table>
Ta-dah:

HTML table with two sticky columns and headers (using only CSS)

I'm struggling to get two fixed columns and headers using a HTML table + scrollable body.
I've searched a lot and found these approaches:
this (only 1 fixed column/header)
and this (only 1 fixed column/header; no table markup)
and I've also created my own solution using a library, which works fine, but I don't like how the html table tag markups getting messed up & moreover initializing the colModal is not that good since I've a dynamic amount of columns.
Since I am not satisfied with any of these solutions, I would like to know if there is a chance to get this job done only using CSS?

The closest I came is this.
No HTML table markup and no IE support.
I used position: sticky on the header and the first column.
The dimensions of the table are variable, but the widths of the cells need to be supplied.

I don't think that it's possible to achieve what I want only using CSS. So I've found another library called TableHeadFixer which does not duplicate nodes and IDs in your HTML markup.
So I came up with this final solution:
https://jsfiddle.net/4s53f124/2/
All you have to do is to call the tableHeadFixer method of the library (and if you want to some CSS adjusting):
$(document).ready(function () {
$("#fixTable").tableHeadFixer({"left": 2});
});

One way to do this with only html and css is to add a second table within the first column where you add the first 2 columns and do the same way for the body. Maybe not the most elegant solution but it does the job with pure html and css.
thead tr>th {
background: #eee;
position: sticky;
padding: .5rem;
z-index: 2;
top: 0;
border-bottom: 1px solid black;
}
.sticky-column {
border-right: 1px solid black;
}
.sticky-column tr>th {
border-bottom: 0px solid black;
}
thead tr>.sticky-column {
z-index: 3;
left: 0;
top: 0;
}
tbody tr>.sticky-column {
background: #fff;
position: sticky;
z-index: 1;
left: 0;
}
<table id="board">
<thead>
<tr>
<th class="sticky-column">
<table>
<tr>
<th> <strong>Column 1</strong>
</th>
<th>
<strong>Column 2</strong>
</th>
</tr>
</table>
</th>
<th>
<strong>Column 3</strong>
</th>
<th>
<strong>Column 4</strong>
</th>
<th>
<strong>Column 5</strong>
</th>
<th>
<strong>Column 6</strong>
</th>
<th>
<strong>Column 7</strong>
</th>
<th>
<strong>Column 8</strong>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky-column">
<table>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>
</td>
<td>
Content 3
</td>
<td>
Content 4
</td>
<td>
Content 5
</td>
<td>
Content 6
</td>
<td>
Content 7
</td>
<td>
Content 8
</td>
</tr>
<tr>
<td class="sticky-column">
<table>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>
</td>
<td>
Content 3
</td>
<td>
Content 4
</td>
<td>
Content 5
</td>
<td>
Content 6
</td>
<td>
Content 7
</td>
<td>
Content 8
</td>
</tr>
<tr>
<td class="sticky-column">
<table>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>
</td>
<td>
Content 3
</td>
<td>
Content 4
</td>
<td>
Content 5
</td>
<td>
Content 6
</td>
<td>
Content 7
</td>
<td>
Content 8
</td>
</tr>
<tr>
<td class="sticky-column">
<table>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>
</td>
<td>
Content 3
</td>
<td>
Content 4
</td>
<td>
Content 5
</td>
<td>
Content 6
</td>
<td>
Content 7
</td>
<td>
Content 8
</td>
</tr>
<tr>
<td class="sticky-column">
<table>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>
</td>
<td>
Content 3
</td>
<td>
Content 4
</td>
<td>
Content 5
</td>
<td>
Content 6
</td>
<td>
Content 7
</td>
<td>
Content 8
</td>
</tr>
<tr>
<td class="sticky-column">
<table>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>
</td>
<td>
Content 3
</td>
<td>
Content 4
</td>
<td>
Content 5
</td>
<td>
Content 6
</td>
<td>
Content 7
</td>
<td>
Content 8
</td>
</tr>
<tr>
<td class="sticky-column">
<table>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>
</td>
<td>
Content 3
</td>
<td>
Content 4
</td>
<td>
Content 5
</td>
<td>
Content 6
</td>
<td>
Content 7
</td>
<td>
Content 8
</td>
</tr>
<tr>
<td class="sticky-column">
<table>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>
</td>
<td>
Content 3
</td>
<td>
Content 4
</td>
<td>
Content 5
</td>
<td>
Content 6
</td>
<td>
Content 7
</td>
<td>
Content 8
</td>
</tr>
</tbody>
</table>

Even Odd rows for only one column in tables?

I'm working with tables to display data on a webpage.
Right now I've got even odd for <tr> to have the rows alternating colors. However, I am going to be freezing the 1st column of the table and having the remaining columns scroll to the left and right.
At the moment, the columns that are scrolling to the left are being seen under the frozen column. If I apply a background color to the cells in the frozen column, the columns that are no longer to be displayed when scrolled to the left are then truly hidden.
I'm calling the first column's cells by using td:nth-child(1).
The problem is that I am using alternating row colors so assigning a background color to td:nth-child(1) makes all cells in that 1st row the same color.
Is it possible to add (odd) and (even) to the nth-child call?
I'd like to use a better method (if there is one) than just assigning classes to each of the cells in the first column.
(NOTE: Added my code 02/12/2018)
table.sidebyside {
width: 800px;
overflow-x: scroll;
}
table.sidebyside th:nth-child(1), table.sidebyside td:nth-child(1) {
width: 300px !important;
position:absolute;
}
table.sidebyside th:nth-child(2), table.sidebyside td:nth-child(2) {
padding-left: 300px !important;
}
table.sidebyside th {
background-color: #4b91ea;
height: 63px;
}
table.sidebyside td:nth-child(1) (odd) {
background-color: #fff;
}
table.sidebyside tr:nth-child (even) > td:nth-child(1) {
background-color: rgba(0,0,0,.05);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12">
<div style="width:600px; overflow: auto;">
<table class="sidebyside table table-striped">
<tbody>
<tr>
<th>
</th>
<th>
Bronze-High Deductible
</th>
<th>
Silver-HMO
</th>
<th>
Gold-PPO Low
</th>
<th>
Gold-PPO Med
</th>
</tr>
<tr>
<td>
<b>
Score: </b>
</td>
<td>
<span class="text-green">
95 </span>
</td>
<td>
<span class="text-yellow">
77 </span>
</td>
<td>
<span class="text-danger">
32 </span>
</td>
<td>
<span class="text-danger">
24 </span>
</td>
</tr>
<tr>
<td>
<b>
RealCost: </b>
</td>
<td>
$4,7772.32
</td>
<td>
$6,024.81
</td>
<td>
$8,194.55
</td>
<td>
$8,194.55
</td>
</tr>
<tr>
<td>
<b>
Premiums: </b>
</td>
<td>
$2,400.00
</td>
<td>
$3,100.00
</td>
<td>
$3,956.00
</td>
<td>
$3,956.00
</td>
</tr>
<tr>
<td>
<b>
Cost of Services: </b>
</td>
<td>
$1,575.00
</td>
<td>
$2,239.00
</td>
<td>
$2,983.00
</td>
<td>
$2,983.00
</td>
</tr>
<tr>
<td>
<b>
Cost of Medications: </b>
</td>
<td>
$797.32
</td>
<td>
$927.32
</td>
<td>
$1,198.46
</td>
<td>
$1,198.46
</td>
</tr>
<tr>
<td>
</td>
<td colspan="4">
</td>
</tr>
<tr>
<td>
<b>
Individual Deductible: </b>
</td>
<td>
$3,350.00
</td>
<td>
$3,850.00
</td>
<td>
$4,250.00
</td>
<td>
$4,250.00
</td>
</tr>
<tr>
<td>
<b>
Individual Out of Pocket Maximum: </b>
</td>
<td>
$6,350.00
</td>
<td>
$6,850.00
</td>
<td>
$7,050.00
</td>
<td>
$7,050.00
</td>
</tr>
<tr>
<td>
<b>
Family Deductible: </b>
</td>
<td>
$6,650.00
</td>
<td>
$6,950.00
</td>
<td>
$7,200.00
</td>
<td>
$7,200.00
</td>
</tr>
<tr>
<td>
<b>
Family Out of Pocket Maximum: </b>
</td>
<td>
$12,900.00
</td>
<td>
$13,900.00
</td>
<td>
$15,400.00
</td>
<td>
$15,400.00
</td>
</tr>
<tr>
<td>
<b>
Coinsurance: </b>
</td>
<td>
20%
</td>
<td>
20%
</td>
<td>
30%
</td>
<td>
30%
</td>
</tr>
<tr>
<td>
<b>
Copayment: </b>
</td>
<td>
$25.00
</td>
<td>
$30.00
</td>
<td>
$40.00
</td>
<td>
$40.00
</td>
</tr>
<tr>
<td>
<b>
Pharmacy Generic: </b>
</td>
<td>
$20.00
</td>
<td>
$35.00
</td>
<td>
$45.00
</td>
<td>
$45.00
</td>
</tr>
<tr>
<td>
<b>
Pharmacy Brand: </b>
</td>
<td>
$40.00
</td>
<td>
$45.00
</td>
<td>
$60.00
</td>
<td>
$60.00
</td>
</tr>
<tr>
<td>
<b>
Pharmacy Non Preferred: </b>
</td>
<td>
$60.00
</td>
<td>
$70.00
</td>
<td>
$80.00
</td>
<td>
$80.00
</td>
</tr>
<tr>
<td>
<b>
Mail Order Generic: </b>
</td>
<td>
$60.00
</td>
<td>
$80.00
</td>
<td>
$90.00
</td>
<td>
$90.00
</td>
</tr>
<tr>
<td>
<b>
Mail Order Brand: </b>
</td>
<td>
$80.00
</td>
<td>
$90.00
</td>
<td>
$100.00
</td>
<td>
$100.00
</td>
</tr>
<tr>
<td>
<b>
Mail Order Non Preferred: </b>
</td>
<td>
$120.00
</td>
<td>
$140.00
</td>
<td>
$175.00
</td>
<td>
$175.00
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

For even use
table tr td:nth-child(even)
And for odd use
table tr td:nth-child(odd)
Moreover, always prefer to use the exact descendants you want to apply your css on to avoid any invalid html markup to be selected by your stylesheets.

https://jsfiddle.net/1b329d8u/2/ is what I was trying to achieve.
table.sidebyside {
width: 800px;
overflow-x: scroll;
}
.sidebyside th:nth-child(1), .sidebyside td:nth-child(1) {
width: 300px !important;
position:absolute;
}
.sidebyside th:nth-child(2), .sidebyside td:nth-child(2) {
padding-left: 300px !important;
}
.sidebyside th {
background-color: #4b91ea;
height: 63px;
}
.sidebyside tr:nth-child(even) > td:nth-child(1) {
background-color: #fff;
}
.sidebyside tr:nth-child(odd) > td:nth-child(1) {
background-color: #f7fafa;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-12">
<div style="width:600px; overflow: auto;">
<table class="sidebyside table table-striped">
<tbody>
<tr>
<th></th>
<th>Bronze-High Deductible</th>
<th>Silver-HMO</th>
<th>Gold-PPO Low</th>
<th>Gold-PPO Med</th>
</tr>
<tr>
<td><b>Score: </b></td>
<td><span class="text-green">95 </span></td>
<td><span class="text-yellow">77 </span></td>
<td><span class="text-danger">32 </span></td>
<td><span class="text-danger">24 </span></td>
</tr>
<tr>
<td><b>RealCost: </b></td>
<td>$4,7772.32</td>
<td>$6,024.81</td>
<td>$8,194.55</td>
<td>$8,194.55</td>
</tr>
<tr>
<td><b>Premiums: </b></td>
<td>$2,400.00</td>
<td>$3,100.00</td>
<td>$3,956.00</td>
<td>$3,956.00</td>
</tr>
<tr>
<td><b>Cost of Services: </b></td>
<td>$1,575.00</td>
<td>$2,239.00</td>
<td>$2,983.00</td>
<td>$2,983.00</td>
</tr>
<tr>
<td><b>Cost of Medications: </b></td>
<td>$797.32</td>
<td>$927.32</td>
<td>$1,198.46</td>
<td>$1,198.46</td>
</tr>
<tr>
<td></td>
<td colspan="4"></td>
</tr>
<tr>
<td><b>Individual Deductible: </b></td>
<td>$3,350.00</td>
<td>$3,850.00</td>
<td>$4,250.00</td>
<td>$4,250.00</td>
</tr>
<tr>
<td><b>Individual Out of Pocket Maximum: </b></td>
<td>$6,350.00</td>
<td>$6,850.00</td>
<td>$7,050.00</td>
<td>$7,050.00</td>
</tr>
<tr>
<td><b>Family Deductible: </b></td>
<td>$6,650.00</td>
<td>$6,950.00</td>
<td>$7,200.00</td>
<td>$7,200.00</td>
</tr>
<tr>
<td><b>Family Out of Pocket Maximum: </b></td>
<td>$12,900.00</td>
<td>$13,900.00</td>
<td>$15,400.00</td>
<td>$15,400.00</td>
</tr>
<tr>
<td><b>Coinsurance: </b></td>
<td>20%</td>
<td>20%</td>
<td>30%</td>
<td>30%</td>
</tr>
<tr>
<td><b>Copayment: </b></td>
<td>$25.00</td>
<td>$30.00</td>
<td>$40.00</td>
<td>$40.00</td>
</tr>
<tr>
<td><b>Pharmacy Generic: </b></td>
<td>$20.00</td>
<td>$35.00</td>
<td>$45.00</td>
<td>$45.00</td>
</tr>
<tr>
<td><b>Pharmacy Brand: </b></td>
<td>$40.00</td>
<td>$45.00</td>
<td>$60.00</td>
<td>$60.00</td>
</tr>
<tr>
<td><b>Pharmacy Non Preferred: </b></td>
<td>$60.00</td>
<td>$70.00</td>
<td>$80.00</td>
<td>$80.00</td>
</tr>
<tr>
<td><b>Mail Order Generic: </b></td>
<td>$60.00</td>
<td>$80.00</td>
<td>$90.00</td>
<td>$90.00</td>
</tr>
<tr>
<td><b>Mail Order Brand: </b></td>
<td>$80.00</td>
<td>$90.00</td>
<td>$100.00</td>
<td>$100.00</td>
</tr>
<tr>
<td><b>Mail Order Non Preferred: </b></td>
<td>$120.00</td>
<td>$140.00</td>
<td>$175.00</td>
<td>$175.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Thanks #TylerH for the solution. I had to use tr:nth-child(even) > td:nth-child(1) so I could target the 1st column only and use (even) and (odd) at the tr level.

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

Keeping width of two tables same

Here I have 2 tables, I want these 2 tables' width to be same, when the Confirmer name is long the second table expands but the first one remains same, I want both of them to be of same width in any situation, how can that be done? Check this JS Bin example.
HTML:
<table>
<tbody><thead><tr><th>1.5 - STATE</th>
</tr></thead><tr>
<td>
<b>Issued by </b>User Administrator <b>on</b><font face="verdana" size="1" color="red"> 24/05/2013 06:43
</font></td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<th>
Confirmer
</th>
<th>Status</th>
<th>Date</th>
<th>Comment</th>
</tr>
<tr>
<td>Pathak Chankey</td>
<td>
<img src="xyz.png">
</td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>Lastname Firstname</td>
<td>
<img src="xyz.png">
</td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>User Administrator</td>
<td>
<img src="xyz.png">
</td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
</tbody></table>
CSS:
thead{
background-color: grey;
}
table, td
{
background:#fffAF0;
border: 1px solid black;
border-collapse:collapse;
}

Just add a container and set a width in your container then apply the 100% width to your tables like this
div{
width:400px;
}
table {
width:100%;
}
<div>
<table></table>
<table></table>
</div>
http://jsbin.com/iduciw/32/edit

Why do not you use a single table?
<table>
<tr>
<th colspan="4">1.5 - STATE</th>
</tr>
<tr>
<td colspan="4"><b>Issued by </b>User Administrator <b>on</b><font face="verdana" size="1" color="red"> 24/05/2013 06:43 </font></td>
</tr>
<tr>
<th> Confirmer </th>
<th>Status</th>
<th>Date</th>
<th>Comment</th>
</tr>
<tr>
<td>Pathak Chankey</td>
<td><img src="xyz.png"></td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>Lastname Firstname</td>
<td><img src="xyz.png"></td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
<tr>
<td>User Administrator</td>
<td><img src="xyz.png"></td>
<td> 24/05/2013 06:43 </td>
<td> </td>
</tr>
</table>