I have a table in which I have to place radio buttons in multiple columns. From all these buttons, only one radio button can be checked. How to achieve these. I have five columns viz.A,B,C,D,E and I want to place radio button for each column.
//Here is the code for my .aspx page
<%# Page Title="" Language="C#" MasterPageFile="~/Interviewer
/interviewerMasterPage.master" AutoEventWireup="true" CodeFile="AppRatingForm.aspx.cs"
Inherits="Interviewer_AppRatingForm" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css">
.style1
{
width: 100%;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<table cellpadding="2" width="100%">
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td align="center" class="tdtitle" colspan="2">
Interview Rating Form</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td width="25%">
Name of Applicant</td>
<td>
<asp:Label ID="nameLbl" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td>
Post Applied For</td>
<td>
</td>
</tr>
<tr>
<td>
Department</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td align="center" class="tdtitle" colspan="2">
Assessment</td>
</tr>
<tr>
<td align="left" colspan="2">
<table border="1" cellpadding="3" cellspacing="0" class="style1">
<tr>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="5%">
No</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="25%">
Traits</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="8%">
A</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="8%">
B</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="8%">
C</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="8%">
D</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="8%">
E</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="*">
Comments</td>
</tr>
<tr>
<td colspan="8"
style="font-family: 'Times New Roman', Times, serif; font-size: medium; font-weight: bold;">
Personal Traints</td>
</tr>
<tr>
<td>
1</td>
<td>
Personality</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
2</td>
<td>
Physical Fitness</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
3</td>
<td>
Background</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
4</td>
<td>
Confidance</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
5</td>
<td>
Communication Skills</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
6</td>
<td>
Attitude</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="8"
style="font-family: 'Times New Roman', Times, serif; font-size: medium; font-weight: bold;">
Job Related Traits</td>
</tr>
<tr>
<td>
1</td>
<td>
Subject Knowledge</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
2</td>
<td>
Related Work Experience</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
3</td>
<td>
Integrity</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
4</td>
<td>
Reliability</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
5</td>
<td>
Adaptability</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
6</td>
<td>
Initiative</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
7</td>
<td>
Team Work</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
8</td>
<td>
Ethics</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="tdtitle" colspan="2">
</td>
</tr>
<tr>
<td align="center" colspan="2">
</td>
</tr>
<tr>
<td align="center" colspan="2">
</td>
</tr>
</table>
</asp:Content>
There is GroupName property of the radio button that you need to set for each column.
In your column A, set all radio button's to GroupName="A"
<asp:RadioButton ID="RadioButton1" runat="server" GroupName="A" />
In your column B, set all radio button's to GroupName="B"
<asp:RadioButton ID="RadioButton1" runat="server" GroupName="B" />
This will allow the user to only select one radio button from each column.
Related
I have Gravity Forms implemented on a website, but when admin notifications are sent through to email (Gmail hosted) the tables are displaying as code.
This is how it's displaying when sent via email. I'm using Sendgrid as SMTP.
<table width="99%" border="0" cellpadding="1" cellspacing="0" bgcolor="#EAEAEA">
<tr>
<td>
<table width="100%" border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF">
<tr bgcolor="#EAF2FA">
<td colspan="2">
<font style="font-family: sans-serif; font-size:12px;"><strong>Name</strong></font>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="20"> </td>
<td>
<font style="font-family: sans-serif; font-size:12px;">Sample Name</font>
</td>
</tr>
<tr bgcolor="#EAF2FA">
<td colspan="2">
<font style="font-family: sans-serif; font-size:12px;"><strong>Email</strong></font>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="20"> </td>
<td>
<font style="font-family: sans-serif; font-size:12px;"><a href='mailto:enquiry#example.com'>enquiry#example.com</a></font>
</td>
</tr>
<tr bgcolor="#EAF2FA">
<td colspan="2">
<font style="font-family: sans-serif; font-size:12px;"><strong>Phone</strong></font>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="20"> </td>
<td>
<font style="font-family: sans-serif; font-size:12px;">01XXX XXXXXX</font>
</td>
</tr>
<tr bgcolor="#EAF2FA">
<td colspan="2">
<font style="font-family: sans-serif; font-size:12px;"><strong>Company Name</strong></font>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="20"> </td>
<td>
<font style="font-family: sans-serif; font-size:12px;">Enquiry Company Name Ltd</font>
</td>
</tr>
<tr bgcolor="#EAF2FA">
<td colspan="2">
<font style="font-family: sans-serif; font-size:12px;"><strong>Products Available</strong></font>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="20"> </td>
<td>
<font style="font-family: sans-serif; font-size:12px;">Request Title</font>
</td>
</tr>
<tr bgcolor="#EAF2FA">
<td colspan="2">
<font style="font-family: sans-serif; font-size:12px;"><strong>Your message</strong></font>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="20"> </td>
<td>
<font style="font-family: sans-serif; font-size:12px;">This is an example message.</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
However, it used to send as the table itself perfectly formatted. In the meantime, I've set it up to send as plain text for ease of reading, but the person receiving has specifically requested it's displayed as a table.
Can anyone advise on how to fix this?
Thank you in advance!
The problem might be that you selected to send as plain text. This way gmail strips all html tags and most probably removes the table too.
Try selecting HTML format on emails.
There should be a good way to alternate table row background colors based on class. Currently, I'm just doing something like this:
/* Staff Table */
table#user_provisioning .bpink { background-color: lavenderblush; }
table#user_provisioning .fred { color: red; }
table#user_provisioning tr.Administrators, tr.ProfessionalStaff { background-color: honeydew; }
table#user_provisioning tr.Deans, tr.SupportStaff { background-color: white; }
table#user_provisioning td { text-align: left; }
I would think there's a way to do something like:
table#user_provisioning tr.{foreach class}:nth-child(odd) { background-color: honeydew; }
Unfortunately, I'm not sure how to include all tr classes for the table and go even/odd based on that.
Suggestions?
Edit: Adding snipped/edited page code
table#table_organization tr.unsure,
tr.dept,
tr.org {
background-color: honeydew;
}
table#table_organization tr.board,
tr.prog,
tr.ssa {
background-color: white;
}
<section>
<h1> Organization </h1>
<table id="table_organization" class="sortable">
<tr>
<th> Dept. </th>
</tr>
<tr class="unsure">
<td> - </td>
</tr>
<tr class="board">
<td> Board </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
</table>
</section>
Unfortunately CSS does not have a :nth-of-class pseudo selector. As long as the number of rows is very limited, using the adjacent sibling selector + could help (showing only for .dept):
.dept {
background: yellow;
}
.dept+.dept {
background-color: orange;
}
.dept+.dept+.dept {
background-color: red;
}
<table id="table_organization" class="sortable">
<tr>
<th> Dept. </th>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
</table>
table#table_organization tr.unsure,
tr.dept:nth-of-type(odd),
tr.org {
background-color: honeydew;
}
tr.dept:nth-of-type(even){
background-color: red;
}
table#table_organization tr.board,
tr.prog,
tr.ssa {
background-color: white;
}
<section>
<h1> Organization </h1>
<table id="table_organization" class="sortable">
<tr>
<th> Dept. </th>
</tr>
<tr class="unsure">
<td> - </td>
</tr>
<tr class="board">
<td> Board </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="dept">
<td> Department </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="prog">
<td> Program </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="org">
<td> Organization </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
<tr class="ssa">
<td> SSA </td>
</tr>
</table>
</section>
I've data inside a bootstrap table. As the rows increases, the header will be out of sight on vertical scroll. So I need to fix the header of the bootstrap table with table body vertical scrollable. Also,the horizontal scroll for the whole table when columns exceed in the page.
Reference implementation without bootstrap.This is implemented by using two tables. One for header and the other for body.
I've the following data which is similar to my original data.
NOTE:I am not using any col-*-* for table's td. Because my header columns are more than 12. And may increase up to 15. So I don't use the column classes.
HTML
<tbody>
<tr>
<th style="cursor: pointer;">
ABCD
</th>
<th style="cursor: pointer;">
Asadh uysdsgh
</th>
<th style="cursor: pointer;">
ghdsgsh sdfsdjsd
</th>
<th style="cursor: pointer;">
sdagfh sdhfsjk
</th>
<th style="cursor: pointer;">
sdhfasgh sdjkj
</th>
<th style="display: none; cursor: pointer;">
shadfj sjdskdl
</th>
<th style="cursor: pointer;">
sddgjgfhgshdf skldj
</th>
<th style="cursor: pointer;">
sdfsffsd sdfsd
</th>
<th style="cursor: pointer;">
sdfsd sdfsd
</th>
<th style="cursor: pointer;">
fhgdd sdg sfs fsfsffsd sdfffs
</th>
<th style="cursor: pointer;">
fsdfsd dvf ffff
</th>
<th style="cursor: pointer;">
fsdfsd dvf ffff
</th>
<th style="cursor: pointer;">
sfgasad sdfjhjshj
</th>
<th style="cursor: pointer;"></th>
</tr>
<tr>
<td>
579852
</td>
<td>
21June_The hhjhj bhjhhkj
</td>
<td>
US jhgg
</td>
<td>
sdafss
</td>
<td>
sdfsdfssd
</td>
<td style="display: none;">
No
</td>
<td>
sfdf ,sdffssd,sdfhshdj,
</td>
<td>
Acsadfds
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sfasd
</td>
<td>
06/30/2016
</td>
<td>
sdasd
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579850
</td>
<td>
sdfff sdfabsd sjd </td>
<td>
US asdfd
</td>
<td>
sdfsdsdsd
</td>
<td>
sdfsfdfas
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf,
</td>
<td>
sdfsdsda
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
07/04/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579893
</td>
<td>
sdhafasdjfj sdhfasdsf sdfha sdfsfh
</td>
<td>
US sdfsdfgl
</td>
<td>
dfsjsdsd
</td>
<td>
sdfdfjk
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
sdfgagf
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
06/28/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
545554
</td>
<td>
jhsdfg sdfhh sdafjh
</td>
<td>
US sdfhhdf
</td>
<td>
sdfadilgf
</td>
<td>
tadil
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
tadil
</td>
<td>
08/08/2003
</td>
<td>
0
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
06/29/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579892
</td>
<td>
sadfs asdfhds dbsh dfsdh
</td>
<td>
US tadil
</td>
<td>
sddftadil
</td>
<td>
fftadil
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
Active
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
tadil fsddf
</td>
<td>
06/29/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579855
</td>
<td>
jsdhfsdfb dfs bsdhfdjs bsdhbh
</td>
<td>
US tadil
</td>
<td>
sdftadil
</td>
<td>
fjtadil
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
tadil
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
</td>
<td>
06/21/2016
</td>
<td>
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579851
</td>
<td>
asdhshj- jd dsjsh jjsd
</td>
<td>
US tadil
</td>
<td>
tadil
</td>
<td>
Retail
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
tadil
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
06/29/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579842
</td>
<td>
Test sdhfhad bsdbh
</td>
<td>
US English
</td>
<td>
Internal
</td>
<td>
tadil
</td>
<td style="display: none;">
No
</td>
<td>
sdfffa ,dsjfjs,
</td>
<td>
Active
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sdafsfsd
</td>
<td>
07/01/2016
</td>
<td>
asdff
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
</tbody>
</table>
</div>
Fiddle
Fiddle by using the provided link of the original question.
Just look at the above fiddle, when there are more headers,table gets distorted.
This is supposed to be a sudoku table. I checked the css elements and everything appears to be in good working order. I think that I made mistakes in the colspan and rowspan in the table. The "greenBox and "goldBox" classes should make the background images span across 3 rows and 3 columns; however, in the sudoku 9x9 table only 9 squares are filled with the background images. Any help is greatly appreciated. Thank you for your time.
<table class="spuzzle">
<caption>Sudoku</caption>
<thead>
<tr>
<th> </th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
</thead>
<tbody>
<tr>
<th>A</th>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td>4</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>5</td>
<td> </td>
</tr>
</table>
</td>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td>5</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td>7</td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<th>B</th>
</tr>
<tr>
<th>C</th>
</tr>
<tr>
<th>D</th>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>6</td>
<td> </td>
<td>9</td>
</tr>
<tr>
<td>4</td>
<td>7</td>
<td>2</td>
</tr>
</table>
</td>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td>2</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>9</td>
<td> </td>
</tr>
</table>
</td>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td>9</td>
<td>3</td>
<td>7</td>
</tr>
<tr>
<td>4</td>
<td> </td>
<td>8</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<th>E</th>
</tr>
<tr>
<th>F</th>
</tr>
<tr>
<th>G</th>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td>1</td>
</tr>
<tr>
<td> </td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td> </td>
<td>6</td>
<td> </td>
</tr>
</table>
</td>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>8</td>
<td> </td>
<td>1</td>
</tr>
</table>
</td>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>7</td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<th>H</th>
</tr>
<tr>
<th>I</th>
</tr>
</tbody>
`
</table>
The CSS is posted below. But I believe that it's functioning as it should.
table.spuzzle
{
border-collapse:collapse;
}
table.subTable
{
border-collapse:collapse;
}
table.spuzzle td
{
border:5px outset gray;
}
table.spuzzle th
{
font-size:8px;
color:gray;
}
tbody th
{
height:40px;
}
table.subTable td
{
font-size:20px;
color:blue;
width:40px;
height:40px;
text-align:center;
vertical-align:middle;
border:1px solid black;
}
td.goldBox
{
background-image:url("gold.jpg");
background-position:center center;
background-repeat:no-repeat;
}
td.greenBox
{
background-image:url("green.jpg");
background-position:center center;
background-repeat:no-repeat;
}
It appears your background images aren't large enough.
Try replacing images with background color to see if the basic affect is right then, look at what is going wrong with the images, perhaps remove background-repeat:no-repeat;. See http://jsfiddle.net/d6ZNF/1/ for using solid colors.
When debugging, also keep in mind that CSS is case-sensitive. I also recommend using a tool like Firebug for Firefox (free download) or developer tools in Chrome (hit F12) to inspect the suspect elements and see what, if any, CSS classes are applied to them.
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>