I am currently trying to make a table-based header to repeat each time a page-break occurs. My table-header repeat correclty if it does not contain any table inside.
I'm using this code :
<table class="report-container">
<thead class="report-header">
<tr>
<th class="report-header-cell">
...
</th>
</tr>
</thead>
<tfoot class="report-footer">
<tr>
<td class="report-footer-cell">
...
</td>
</tr>
</tfoot>
<tbody class="report-content">
<tr>
<td class="report-content-cell">
...
</td>
</tr>
</tbody>
</table>
And this CSS :
table.report-container {
page-break-after:always;
}
thead.report-header {
display:table-header-group;
}
tfoot.report-footer {
display:table-footer-group;
}
I can put anything I want in my th.report-header-cell, this will work. But not if I put another table inside. Is there a trick to get ride of this kind of problem ?
I tried to change the display of my tables, not working also.
I'm running on Google Chrome & my projet use Bootstrap 4 tables, but notice that basic tables will not work also.
EDIT : Here is how I put a table in my th.report-header-cell :
<table class="report-container">
<thead class="report-header">
<tr>
<th class="report-header-cell">
<table style="width:100%;">
<tbody>
<tr>
<td style="width:50%;">
...
</td>
<td style="width:50%;">
...
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</thead>
</table>
This example will not print my header in each page, but only on the first one. The footer will continue to work and will be printed on each page.
Related
I have a table header that needs (I believe) to stay in a separate table due to positioning reasons. What is the best way to tell the table header to determine its column spacing based on the tbody contents below that rest inside a different <table>? Due to some constraints in the structure of what I am working on it would be difficult to move these into the same table, so that probably isn't an option, unfortunately.
For example, I have something like this:
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
</tr>
</thead>
</table>
<div>
<p>Some keys here about what highlighted text below means</p>
</div>
<table>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</tbody>
</table>
The top table header is in a fixed position so the table and key will just scroll behind it as a user scrolls the table. I cannot figure out a way to get the TH to match the TDs below like they normally do when combined in the same table. Is there a trick I am unaware of to make them part of the same data set?
The simplest way is to ensure that both the tables has the same parent element. Then set the width of the th and first rows td tags to relative percentage,
so that since both the elements have the same parent, their widths will match also. Like shown below.
html,
body {
margin: 0px;
}
table {
width: 100%
}
<table border="1" class="fix">
<thead>
<tr>
<th style="width:20%">One</th>
<th style="width:20%">Two</th>
<th style="width:20%">Three</th>
<th style="width:20%">Four</th>
<th style="width:20%">Five</th>
</tr>
</thead>
</table>
<div>
<p>Some keys here about what highlighted text below means</p>
</div>
<table border="1">
<tbody>
<tr>
<td style="width:20%">One</td>
<td style="width:20%">Two</td>
<td style="width:20%">Three</td>
<td style="width:20%">Four</td>
<td style="width:20%">Five</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</tbody>
</table>
This was for the table td issue. Now the position fixed for the header can be implemented like so.
html,
body {
margin: 0px;
}
.fix {
position: fixed;
top: 0px;
}
.offset {
margin-top: 50px;
}
table {
width: 100%
}
<table border="1" class="fix">
<thead>
<tr>
<th style="width:20%">One</th>
<th style="width:20%">Two</th>
<th style="width:20%">Three</th>
<th style="width:20%">Four</th>
<th style="width:20%">Five</th>
</tr>
</thead>
</table>
<div class="offset">
<p>Some keys here about what highlighted text below means</p>
</div>
<table border="1">
<tbody>
<tr>
<td style="width:20%">One</td>
<td style="width:20%">Two</td>
<td style="width:20%">Three</td>
<td style="width:20%">Four</td>
<td style="width:20%">Five</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</tbody>
</table>
I have a table inside table in html as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr>
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{.quantity * .rate}</td>
</tr>
{/items}
</tbody>
</table>
</tr>
{/orders}
</tbody>
</table>
I get the output as shown below:
Why I get such an output? I expected to see nested tables.
Your HTML has several errors, starting with this:
{#orders}
As others have mentioned, this is also bad:
<tr>↩ <table class="sortable draggable row-details"
Do yourself a big favor and start using an HTML validator like W3C's. It will find problems like this quickly. (It will also find other things to complain about that you might not need to fix, but when it helps, it will save a lot of time.)
Also, start using the Chrome inspector to see what it's done when your markup goes haywire. In this case, you can see that Chrome closed your first table, instead of nesting it. When Chrome messes with your HTML like this, it's a sign you might have an error in that spot.
</tr></tbody></table>
{#items}
{/items}
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<table>
<tr>
<td> <!-- must be in td -->
<table> <!-- nested table -->
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
your nested table need to be inside of td or th.
You need to nest the child <table> tag inside a <td> tag, not inside a <tr> tag. Doing this should make it display properly, as only a <td> or <th> tag can go directly inside a <tr> tag.
The <table> tag needs to be inside <td> or <th> tag for it to be nested. In your code, you have put the <table> tag as a child of <tr> tag which is wrong. It should be child of <td> or <th>.
Inserting <td> or <th> between <tr> and <table> will give the output correctly.
Here is working link for reference:
Nested Tables in HTML
Example:
<table border="1">
<thead>
<tr>
<th>Item 1
<th>Item 2
</tr>
</thead>
<tbody>
<tr>
<td>
<table border="1">
<tr>
<td>1
<td>2
</tr>
<tr>
<td>1
<td>2
</tr>
</table>
<td>A
</tr>
</tbody>
</table>
I have following table structure
<table>
<table>
<thead>
<tr>...header template...</tr>
</thead>
</table>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
<table>
My problem is that the datarows and header rows are not aligned to each other.
The table structure looks wierd.
Any clue how can i make them aligned.
Edit:
I have used Jqgrid to populate my grid.
The table structure which jqgrid produces is like the above one.
If i dont wrap within tag, then the first inside disappears.
Somewhere i found that jquery.clean will clean up if we dont wrap within table.
do u guys have any idea on this
You have so much syntax errors.
This is normal table:
<table border=1>
<thead>
<tr><th>header template</th></tr>
</thead>
<tbody>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
</tbody>
</table>
A table have head and body and each can have rows and columns:
<table>
<thead>
<tr><td></td></tr>
</thead>
<tbody>
<tr><td></td></tr>
</tbody>
<table>
You can also see following link for more details.
Cheers !!
Try using a syntax like this:
<table>
<thead>
<tr>
<th colspan="2"> ...header template... </th>
</tr>
</thead>
<tbody>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</tbody>
</table>
I am not really sure if there is a way to do this, and as of now I am thinking I will just make a separate element with absolute positioning and place it in the proper position.
This is what I would like to do with the table... Is it even possible? Right now I have the table that you can see part of to the right, but I was just trying to think of a way to do this.
I have a normal table layout as of now: But take a look at the fiddle: http://jsfiddle.net/W3Tvm/
I guess the main challenge will be trying to keep the border-radius
<table class="overviewTable">
<thead>
<tr>
<th colspan="5">
FAN FREE TERMINALS</th>
</tr>
</thead>
<thead class="posiOverviewPN">
<tr>
<th class="txHeader">
TX4200E</th>
<th class="ksHeader">
KS6700</th>
<th class="ksHeader">
KS7200</th>
<th class="ksHeader">
KS7500</th>
<th class="ksHeader">
KS7700</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img height="68px" src="../posiflex/images/tx-4200.png" width="120px"></td>
<td>
<img height="108px" src="../posiflex/images/ks6700.png" width="120px"></td>
<td>
<img height="109px" src="../posiflex/images/ks7200.png" width="120px"></td>
<td>
<img height="117px" src="../posiflex/images/ks7500.png" width="120px"></td>
<td>
<img height="119px" src="../posiflex/images/ks7700.png" width="120px"></td>
</tr>
</tbody>
</table>
I believe what you are wanting to do is basic table structuring: http://jsfiddle.net/9VULt/
All you need to do is have empty th/td cells:
<table>
<thead>
<tr>
<th><!--empty--></th>
<th>TX42</th>
</tr>
<tr>
<th><!--empty--></th>
<th>image</th>
</tr>
</thead>
<tbody>
<tr>
<td>Advantage</td>
<td>Industrial grade...</td>
</tr>
</tbody>
</table>
Is there any way to make the header align towards right?
Tested in Internet Explorer 7 only.
<html>
<style type="text/css">
th {
text-align: left;
}
</style>
<body>
<table width="100%" border="1">
<thead>
<tr>
<th style="width: 250px;">Tag
<th style="width: 100px; text-align: right;">Duration
</tr>
</thead>
<tbody>
<tr>
<td > one
<td> two
</tr>
</tbody>
</table>
</body>
</html>
First, close your tags. You have a lot of invalid HTML here. Second, you're mixing the table width (100%) as a percentage and the cell widths (250px, 100px) as pixel widths. These two are not compatible. Choose either one or the other and keep it consistent throughout your table.
<table style="width:350px" border="1">
<thead>
<tr>
<th style="width:250px;">Tag</th>
<th style="width:100px; text-align:right;">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td>one</td>
<td>two</td>
</tr>
</tbody>
</table>
You aren't closing your TH tags (or your TD tags for that matter). Fix below:
<table width="100%" border="1">
<thead>
<tr>
<th style="width: 250px;">Tag</th>
<th style="width: 100px; text-align: right;">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td> one </td>
<td> two </td>
</tr>
</tbody>
</table>