In my body i have a table element (like this below).
When i want to print my html page, there should be the and content on every page. The header is working great but the footer is only showed at the last page.
I have found many "solutions" for a problem like this but none worked
Adding or removing --style="display: table-footer-group"-- to the element does nothing.
It is imported to use only HTML and CSS
<table>
<thead>
<tr>
<td colspan="5">
<table style="width: 100%;">
<tr>
<td>Some Header Stuff</td>
</tr>
</table>
</td>
</tr>
<tr class="border_bottom">
<td colspan="1" class="styledheader">header1</td>
<td colspan="1" class="styledheader">header2</td>
<td colspan="1" class="styledheader">header3</td>
<td colspan="1" class="styledheader">header4</td>
<td colspan="1" class="styledheader">header5</td>
</tr>
</thead>
<tfoot>
<tr class="border_top">
<td colspan="1">Footer Left</td>
<td colspan="4">Footer Right</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>SomeText</td>
<td>SomeText</td>
<td>SomeText</td>
<td>SomeText</td>
<td>SomeText</td>
</tr>
---More rows
</tbody>
</table>
--- Edit 12.05.2017 09:45
-- Changed code as creativename & daviddomain wrote
Changed
<td colspan="1" id="styledheader">header1</td>
to
<td colspan="1" class="styledheader">header1</td>
and made first "/tbody" to "tbody"
You're probably using chrome. According to https://crbug.com/656232 (While table header prints in all pages, table footer only appears in last page) Edge and Firefox do what you want you want, but chrome support is in progress.
So, until chrome gets that bug fixed, use a different browser.
You are not opening the tbody with the <tbody> tag. Also use classes instead of id's when using it more than once:
<td colspan="1" class="styledheader">header1</td>
<td colspan="1" class="styledheader">header2</td>
instead of
<td colspan="1" id="styledheader">header1</td>
<td colspan="1" id="styledheader">header2</td>
Don't forget to change the id selector to a class selector in your CSS
Related
Consider this HTML table:
<table contenteditable="true">
<tbody>
<tr>
<td tabindex="0"></td>
<td tabindex="0"></td>
<td tabindex="0"></td>
</tr>
<tr>
<td tabindex="0"></td>
<td tabindex="0"></td>
<td tabindex="0"></td>
</tr>
</tbody>
</table>
I would like the user to be able to tab from cell to cell as he edits the table contents, and to programmatically focus on any given cell. I observed the following behaviors in Chrome, and I'm trying to understand and remedy them:
I don't understand why if I put the cursor in one cell and press the tab key, the cursor doesn't go to the next cell.
I don't understand why when I click on a cell, although the cursor shows up and I can edit its contents, focus still seems to be on the table as a whole rather than that cell specifically (found out by console logging document.activeElement)
I don't understand why when I execute myCell.focus() in Javascript, the cursor doesn't appear in the cell in question even though the cell becomes the activeElement and the table as a whole has contenteditable="true"
JSFiddle example
For tabbing to work on both Chrome 76 and Firefox 68, I needed to set the table itself to not be editable, but then also set each cell to be editable:
<table contenteditable="false">
<tbody>
<tr>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
<tr>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
</tbody>
</table>
JSFiddle example
It will be better to use input elements in each tds and then use this function:
js
$('td').bind('keypress', function(event) {
if(event.which === 9) {
if ($(this).next().length > 0){
$(this).next().find("input").focus();
}else{
$(this).parent().next().find('td').first().find("input").focus();
}
});
html
<table contenteditable="true">
<tbody>
<tr>
<td tabindex="0"><input /></td>
<td tabindex="0"><input /></td>
<td tabindex="0"><input /></td>
</tr>
<tr>
<td tabindex="0"><input /></td>
<td tabindex="0"><input /></td>
<td tabindex="0"><input /></td>
</tr>
</tbody>
</table>
Is it possible to merge two cells vertically and keep the text in Outlook 2016?
1.
2.Click merge cells
Text disappears
Alternatively, it appears impossible to get this table to appear correctly in an email (in notepad++, choose Run/Send via Outlook), however when viewed in a browser, it appears fine.
<html>
<table class="tg" border="1">
<tr>
<th class="tg-yw4l">Type</th>
<th class="tg-yw4l">Power</th>
<th class="tg-yw4l">Torque</th>
</tr>
<tr>
<td class="tg-yw4l" rowspan="2">Car</td>
<td class="tg-yw4l">120hp</td>
<td class="tg-yw4l">100nm</td>
</tr>
<tr>
<td class="tg-yw4l" colspan="2">Has 4 wheels<br></td>
</tr>
</table>
</html>
Finally, I understand as of Outlook 2007, it uses Word (!) to render html, not Internet Explorer. However when viewing this html in word, the title "Car" appears, but not in outlook.
EDIT: I just rebooted and let office install its updates and now the original emails and table merge work properly.
Here is one way to achieve this. Removing the col spans and rowspans you will need to resort to more tables but you can be sure it will render the same across all devices.
<table class="tg" border="1">
<tr>
<th class="tg-yw4l">Type</th>
<th class="tg-yw4l">
<table border="1">
<tr>
<th>Power</th><th>Torque</th>
</tr>
</table>
</th>
</tr>
<tr>
<td class="tg-yw4l" align="center" valign="middle">
<table class="tg" border="1">
<tr>
<td align="center" valign="middle">Car</td>
</tr>
</table>
</td>
<td>
<table border="1">
<tr>
<td>120hp</td><td>100nm</td>
</tr>
</table>
<table class="tg" border="1">
<tr>
<td class="tg-yw4l">Has 4 wheels<br></td>
</tr>
</table>
</td>
</tr>
</table>
Hope this is what you were after.
Cheers
I need to add a display block to my tbody in order to make my page-break-inside working.
When I do that, the page break works on printing, but the table's shape is modified for one specific tbody.
html:
<div class="row section-content">
<table>
<tbody class="subsection">
<tr>
<th colspan="2">Personal infos</th>
</tr>
<tr class="check">
<td class="control-title">Is licensed</td>
<td class="check-body control-body">false</td>
</tr>
<tr class="text">
<td class="control-title">First name</td>
<td class="text-body control-body"> Gc yt?tv</td>
</tr>
<tr class="text">
<td class="control-title">Last name</td>
<td class="text-body control-body">Bhvug7y</td>
</tr>
<tr class="text">
<td class="control-title">Adress</td>
<td class="text-body control-body">Guvyb</td>
</tr>
<tr class="radioBtn">
<td class="control-title">Wants to suscribe to monthly discount</td>
<td class="radio-body control-body">No</td>
</tr>
<tr class="number">
<td class="control-title">Annual household income</td>
<td class="number-body control-body">10</td>
</tr>
</tbody>
<tbody class="subsection">
<tr>
<th colspan="2">Accomodation</th>
</tr>
<tr class="gps">
<td class="control-title">Location</td>
<td class="gps-body control-body">55.8755037, -4.2547716</td>
</tr>
<tr class="number">
<td class="control-title">Iso reference</td>
<td class="number-body control-body">15</td>
</tr>
<tr class="radioBtn">
<td class="control-title">Accomodation type</td>
<td class="radio-body control-body">House</td>
</tr>
</tbody>
</table>
</div>
Before:
]
After with display block:
After struggling with the same issue for days, i found that using display:table-row-group works perfectly for this situation.
display:block will disconnect the element from the parent table, causing this issue.
display:table-row-group render the element just like a <tbody>, keeping the DOM correct.
reference: https://www.w3schools.com/jsref/prop_style_display.asp
I do had the same problem and after searching all over i found a solution for my problem which is, first add a class to table which you dont want to break while printing like unbreakable now add css
.unbreakable td{
width: 100% !important;
}
.unbreakable tr{
page-break-inside: avoid !important;
}
It worked fine for me hope it works for you too... :) Thanks...
Having some trouble figuring out what the grid is like for using colspan, so that I can evenly align my items.
HTML
<table class="table MethodList" ng-repeat="method in api.methods">
<tr>
<td colspan=4 style="font-weight:bold">{{method.name}}</td>
<td colspan=8>{{method.desc}}</td>
<tr>
<td colspan=4></td>
<td colspan=8 style="background:#E6E6DA">{{method.parameters}}</td>
</tr>
<tr>
<td colspan=4></td>
<td colspan=8>{{method.additional}}</td>
</tr>
</tr>
</table>
What this does
As you can see, the following texts are pushed back each row further and I do not know why. I am trying to just keep the initial value (index, create, confirm, choose) as the only item in colspan=4, then everything else to be after that.
I also have bootstrap included in case they use some nice template.
It looks like you have a misplaced closing tr tag </tr> at the end of your table.
Please fix it and check again to see if the layout is displayed correctly
Your code should became something like this:
<table class="table MethodList" ng-repeat="method in api.methods">
<tr>
<td colspan=4 style="font-weight:bold">{{method.name}}</td>
<td colspan=8>{{method.desc}}</td>
</tr>
<tr>
<td colspan=4></td>
<td colspan=8 style="background:#E6E6DA">{{method.parameters}}</td>
</tr>
<tr>
<td colspan=4></td>
<td colspan=8>{{method.additional}}</td>
</tr>
</table>
When using colspan on a cell, cell takes width of cell above instead of entire row when in Chrome. Works fine in IE. Even putting 100% width on cell doesn't change anything.
<table cellspacing="1px" cellpadding="0" border="0" id="shiftData">
<tr>
<td class="topRow">Employee</td>
<td class="topRow">Working For</td>
<td class="topRow">Shift</td>
<td class="topRow">Date</td>
<td class="topRow">Time</td>
</tr>
<tr>
<td>Audrey W</td>
<td>Justin B</td>
<td>Host</td>
<td>6/14/12</td>
<td>4:00pm</td>
</tr>
<tr><td colspan="5" align="right" class="buttonRow"><a class="approve" href="">Approve</a><a class="deny" href="">Deny</a></td></tr>
<tr>
<td>Justing B</td>
<td>Leigh Anne</td>
<td>Dishwasher</td>
<td>6/16/12</td>
<td>11:00am</td>
</tr>
</table>
I had a float: right; on the cell div that was apparently causing the issue in Chrome.