I have a long table with header and footer. What I want to do is to create a print function on the table. Below is an example of my code:
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}
<table>
<thead>
<tr>
<td>This is a header</td>
</tr>
</thead>
<tfoot>
<tr><td>This is a footer</td></tr>
</tfoot>
<tbody>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
</tbody>
</table>
From the code above, when it comes to printing process, it shows that every printed page has its own header but it doesn't work out with their footer. My question is, how to display a footer in each of the long printed page.
From The CSS table model,
Print user agents may repeat header rows on each page spanned by a
table.
Print user agents may repeat footer rows on each page spanned by a
table.
In fact, most browsers do this.
Chrome implemented it only for headers (bug 24826) but not for footers (bug 620223).
I don't think there is much you can do.
Related
I have the following table:
Comm Layer
Implemented By
Application
Application
Transport
OS
Internet
OS
Link
OS
Link
Hardware
<table>
<thead>
<tr>
<th>Comm Layer</th>
<th>Implemented By</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td>Transport</td>
<td>OS</td>
</tr>
<tr>
<td>Internet</td>
<td>OS</td>
</tr>
<tr>
<td>Link</td>
<td>OS</td>
</tr>
<tr>
<td>Link</td>
<td>Hardware</td>
</tr>
</tbody>
</table>
I would like to merge the two cells that say "Link" and the three cells that say "OS". I tried using the rowspan attribute in several ways but to no avail. I was able to merge either the two "Link" cells or the three "OS" cells, but not both.
In short: you cannot have a <tr> where all cells participate in a rowspan="" because that creates a zero-height row (as there's no row-specific content). I feel this is a design flaw in HTML.
One workaround is to have a zero-width column that always has non-rowspan="" cells (which are propped up with , but hidden (using visibility: hidden;, not display: none;):
(My posted code comments out the removed cells with <!--<td>OS</td>--> for illustrative purposes, obviously you can remove those in your final version)
table {
border: 1px solid #999;
border-collapse: collapse;
}
th, td {
border: 1px solid #999;
}
tr > *:nth-child(1) { visibility: hidden; }
<table>
<thead>
<tr>
<th> </th>
<th>Comm Layer</th>
<th>Jurisdiction</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td> </td>
<td>Transport</td>
<td rowspan="3">OS</td>
</tr>
<tr>
<td> </td>
<td>Internet</td>
<!--<td>OS</td>-->
</tr>
<tr>
<td> </td>
<td rowspan="2">Link</td>
<!--<td>OS</td>-->
</tr>
<tr>
<td> </td>
<!--<td>Link</td>-->
<td>Hardware</td>
</tr>
</tbody>
</table>
There's probably improvements using more modern CSS techniques to enforce a minimum row height though - I've been using the technique since before I stopped using Dreamweaver in 2004.
<!-- Try this one -->
<table align="center" cellspacing="0" cellspadding=="0">
<thead>
<tr>
<th>Comm Layer</th>
<th>Jurisdiction</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td>Transport</td>
<td rowspan="2">OS</td>
</tr>
<tr>
<td>Internet</td>
</tr>
<tr>
<td rowspan="2">Link</td>
<td>OS</td>
</tr>
<tr>
<td>Hardware</td>
</tr>
</tbody>
</table>
I am trying to add a row with double height to that of other row. But unable to make. Not sure what is wrong.
<table border="1">
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
You'll need some css to set the height of the row;
table td, tr {
height: 30px;
}
table td, tr {
height: 30px;
}
<table border="1">
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</tbody>
</table>
Note; You should add a tbody to your table; What is the purpose for HTML's tbody?
Are you trying to do that ?
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td rowspan="2">A4/B4 <br>(2 rows)</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td colspan="2">C2/C3 <br>(2 cols)</td>
<td>C4</td>
</tr>
</table>
The rowspan property should only be used if you are trying to have one cell appear across two rows (as if you are using the Merge Cells functionality on Excel). If you want to make one row twice as high as the other, this is a display property and should be done with css or inline styling. The middle (row) should also be removed.
If this is just a general example and you need to use it on something more complex. If you use rowspan on say 1 element, you will need to make sure that the following row has 1 less td element otherwise it will not display correctly.
<table border="1">
<tr style="height: 50px">
<td >A1</td>
<td >A2</td>
<td >A3</td>
<td >A4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
I'm currently working on a HTML template and Outlook has been a pain in the neck. I have a row with 2 td in which they have separate contents. Is there a supported way to set the height to be equal? Currently I have set a fixed height on the td but if I scale down to mobile version on Outlook. The text would wrap to the next line and cause the height to expand causing the 2 td to have different height.
<table>
<tr>
<td>
<h3>Content............</h3>
<h3>Content.........</h3>
<h3>Content........</h3>
<h3>Content.......</h3>
</td>
<td>
<h3>Content</h3>
<h3>Content</h3>
</td>
</tr>
</table>
From the code above you can see that the first column would have a bigger height compared to the second column. How can I set the height to be equal without defining a specific height for it?. I have tried media queries however it is not supported on Outlook mobile.
Try This.....
<style>
table, th, td {
border: 1px solid black;
height:100px;
width:500px;
text-align:center;
}
</style>
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer</th>
<th>Footer</th>
<th>Footer</th>
<th>Footer</th>
<th>Footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td>Result</td>
</tr>
<tr>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td>Result</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Result</td>
<td>Total Result</td>
<td>Total Result</td>
<td>Total Result</td>
<td>Total Result</td>
</tr>
</tfoot>
</table>
I hope you find your answer.
If I understand your issue correct, then the two td's do have same height, you just want to align top content? The height is determined by the highest element in the . Its not possible to do width css and dynamic height. Either you set a fixed, or you let the heights height rull.
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<h3>Content............</h3>
<h3>Content.........</h3>
<h3>Content........</h3>
<h3>Content.......</h3>
</td>
<td valign="top">
<h3>Content</h3>
<h3>Content</h3>
</td>
</tr>
</table>
I'm having a werid problem making a super simple table without any css mods.
The code is the following:
<table>
<tr>
<th>ID</th>
<th>Country</th>
<th>Count</th>
</tr>
<tr>
<td>2<td>
<td>ARGENTINA<td>
<td>7379<td>
</tr>
<tr>
<td>3<td>
<td>CHILE<td>
<td>6543<td>
</tr>
<tr>
<td>4<td>
<td>EGYPT<td>
<td>6512<td>
</tr>
</table>
I'm getting crasy in trying to find what's wrong in this super simple code about why is it that the table header's columns refuse to align with its respective values?
It seems that there's an extra ghost column being created.
Can anyone explain, please?
Your lines are missing the closing . You have where the closing tags should be.
<table>
<tr>
<th>ID</th>
<th>Country</th>
<th>Count</th>
</tr>
<tr>
<td>2</td>
<td>ARGENTINA</td>
<td>7379</td>
</tr>
<tr>
<td>3</td>
<td>CHILE</td>
<td>6543</td>
</tr>
<tr>
<td>4</td>
<td>EGYPT</td>
<td>6512</td>
</tr>
</table>
Your doesn't have a closing tag.
Try this:
<table>
<tr>
<th>ID</th>
<th>Country</th>
<th>Count</th>
</tr>
<tr>
<td>2</td>
<td>ARGENTINA</td>
<td>7379</td>
</tr>
<tr>
<td>3</td>
<td>CHILE</td>
<td>6543</td>
</tr>
<tr>
<td>4</td>
<td>EGYPT</td>
<td>6512</td>
</tr>
</table>
Then it looks like it tries to create closing tags for each... And as a result you are ending up with weird extra columns.
Instead of the usual vertical table data layout something like this:
I'd like to display it like this in css:
Any ideas?
My php/html code:
<div class="center_div">
<table>
<tr>
<th>Author</th>
<th>Quotes</th>
<th>Arabic</th>
<th>Reference</th>
</tr>
<?php while ($row= mysql_fetch_array($result)) { ?>
<tr>
<td width="150"><?php h($row['vAuthor']) ?></td>
<td><?php h($row['cQuotes']) ?></td>
<td><?php h($row['cArabic']) ?></td>
<td><?php h($row['vReference']) ?></td>
</tr>
<?php } ?>
</table>
</div></div>
You can do this and it'll still be semantic:
<table>
<tr>
<th>Header</th>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</table>
Example from w3schools:
table {
width: 100%
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
<h2>Horizontal Headings:</h2>
<table>
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h2>Vertical Headings:</h2>
<table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
A table has to be a table, therefore you describe it semantically that way.
A table consists of table rows which contain table data. Changing table data to table rows just by using CSS would just make your semantic worthless. Table rows are meant to be table rows so you should rather restructure your HTML instead of re-arranging anything with CSS.
If you want to achieve a horizontal layout as you depicted it, I recommend using div-Containers instead of tables.
Remember: Tables are used to display tabular data. They are not really meant to be used as a foundation for your layout.
This is really old but what the hey. I think I get what OP is asking for, but I can't see what his images are. What it really comes down to is he has a series of rows with header data and body data. When he gets a row he gets one header cell content and one body cell content. If he were to just put that into a table as he got it, it would show up like this
<table>
<tr>
<th>header 1</th>
<td>body 1</td>
</tr>
<tr>
<th>header 2</th>
<td>body 2</td>
</tr>
</table>
Which is fine but what he really wants is this:
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
<tr>
<td>body 1</td>
<td>body 2</td>
</tr>
</table>
So the solution is to keep two arrays, one for headers, and one for body cells. When you're done getting all your rows and your arrays are full, then generate your HTML.