I have a Google form that I am trying to force to email me the results in a specific format. It works, but the table I insert has a large blank space above it that I would like to get rid of. For example:
Hello!
I have a purchase request that I would like to submit for review, approval,
and processing. Please see below and attached. Thanks.
Name:
Ryan M
Project Number:
Numbers
Project Comments:
No Comments
Website Link to Product:
Cost:
Purpose of Order:
Test
Document Upload:
https://drive.google.com/file/d//view
Date Required By:
2017-01-13
Confirmed Lead Time:
teeeeeest
Here is the Code I'm using:
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin-top:0px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
<td><b>Name:</b></td>
<td>{{Name}}</td>
</tr>
<tr>
<td><b>Project Number:</b></td>
<td>{{Project Number}}</td>
</tr>
<tr>
<td><b>Project Comments:</b></td>
<td>{{Project Comments}}</td>
</tr>
<tr>
<td><b>Website Link to Product:</b></td>
<td>{{Website Link to Product}}</td>
</tr>
<tr>
<td><b>Cost:</b></td>
<td>{{Cost}}</td>
</tr>
<tr>
<td><b>Purpose of Order:</b></td>
<td>{{Purpose of Order}}</td>
</tr>
<tr>
<td><b>Document Upload:</b></td>
<td>https://drive.google.com/file/d/{{Document Upload}}/view</td>
</tr>
<tr>
<td><b>Date Required By:</b></td>
<td>{{Date Required By}}</td>
</tr>
<tr>
<td><b>Confirmed Lead Time:</b></td>
<td>{{Confirmed Lead Time}}</td>
</tr>
</table>
</body>
</html>
Any clues would be a great help. Thanks!
HTML emails can be viewed in various different tools and none of them (outlook) support it the same way (CSS markup included).
The way the output looks make me think that the table is not expanding to 100%. Notice how the table cells are stacked. This could be symptomatic of your real problem, the viewport.
You might start by setting the <html> and <body> width to 100%. Try both CSS and the in-line style markup.
<body width="100%">
I'd stay away from any HTML5 options like <meta name="viewport" content="initial-scale=1, width=device-width"> since you can't guarantee support in email applications.
The CSS markup might not be an option so you could try putting it all inline.
Hope this helps.
I've built a page that makes use of polymer and some custom elements. I was disappointed, that it only worked correctly in Chrome, which was a big setback. In Firefox and IE it only showed the page title and rest was blank, though no errors were reported in the console.
I googled allover the web, but could not find an answer that would resolve the issue (or maybe I just didn't understand it correctly..).
Today I found out, that when I import webcomponents.js like:
<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
the page gets displayed in Firefox just as good as it did in Chrome. However, it doesn't show in Chrome anymore (blank page).
It seems to me, that Chrome will only accept import like this:
<link rel="import" href="/bower_components/webcomponentsjs/webcomponents.js">
Does anyone know a solution to this browser schizophrenia, i.e. how to import the script correctly, so both browsers will accept one code?
EDIT
Well honestly, I can't think of anything else that could be causing it but this line, because if you alter it, you either get nothing or everything displayed.
The page hangs at premierleaguebar.php5.cz and here is the code of <plb-table>, the custom element on the index page:
<dom-module id="plb-table">
<template>
<link href="/public/styles/main.css" rel="stylesheet" type="text/css"/>
<style>
table.data {
border-collapse: collapse;
border: 1px solid #41587c;
text-align: center;
width: 100%;
}
table.data td, table.data th {
padding: 6px;
border: 1px solid #41587c;
text-align: center;
}
table.data th {
background-color: #41587c;
color: #ff0;
border: 2px solid #666;
}
table.data tr:hover {
background-color: #edf1f6;
}
</style>
<link rel="import" href="/bower_components/paper-material/paper-material.html"/>
<paper-material elevation="3">
<div style="overflow-x:auto;">
<table class="data">
<thead>
<tr>
<th colspan="3">HRÁČ</th>
<th colspan="4"><abbr title="Played">ZÁPASY</abbr></th>
<th colspan="4"><abbr title="Played">HRY</abbr></th>
<th colspan="3"><abbr title="Played">SKÓRE</abbr></th>
<th colspan="2"><abbr title="Played">PRŮMĚRY</abbr></th>
</tr>
<tr>
<th>#</th>
<th>JMÉNO</th>
<th><abbr title="Počet odehraných zápasů">G</abbr></th>
<th><abbr title="Výhry">W</abbr></th>
<th><abbr title="Remízy">D</abbr></th>
<th><abbr title="Prohry">L</abbr></th>
<th><abbr title="Body"><b>P</b></abbr></th>
<th><abbr title="Legs Won - vyhrané hry">LW</abbr></th>
<th><abbr title="Legs Lost - prohrané hry">LL</abbr></th>
<th><abbr title="Legs Difference - rozdíl LW - LL">LD</abbr></th>
<th><abbr title="Nezavřené hry">N</abbr></th>
<th><abbr title="Načtené body (pro soupeře)">P+</abbr></th>
<th><abbr title="Obdržené body (od soupeře)">P-</abbr></th>
<th><abbr title="Points Difference - rozdíl P+ - P-">PD</abbr></th>
<th><abbr title="Marks Per Round - počet zásahů na kolo podle automatu co má dycky pravdu; Průměr ze všech her">MPR</abbr></th>
<th><abbr title="Průměrné kolo zavření při výhře">R</abbr></th>
</tr>
</thead>
<tbody>
<template is="dom-repeat" items="{{table}}">
<tr>
<td>{{poradi(index)}}</td>
<td>{{item.nick}}</td>
<td>{{item.matchesplayed}}</td>
<td>{{item.win}}</td>
<td>{{item.draw}}</td>
<td>{{item.loss}}</td>
<td><b>{{item.points}}</b></td>
<td>{{item.legsfor}}</td>
<td>{{item.legsagainst}}</td>
<td>{{item.legdiff}}</td>
<td>{{item.unconcealed}}</td>
<td>{{item.nactenebody}}</td>
<td>{{item.obdrzenebody}}</td>
<td>{{item.bodydiff}}</td>
<td>{{item.mpr}}</td>
<td>{{item.zavrird}}</td>
</tr>
</template>
</tbody>
</table>
</div>
</paper-material>
</template>
</dom-module>
<script>
Polymer({
is: "plb-table",
properties: {
table: {type: Array}
},
poradi: function (ind){
return ++ind;
}
});
</script>
EDIT2
I still think it's a Polymer and/or browser support issue. I bypassed it by checking the browser type (get_browser) and importing the webcomponents.js file according to the specific browser's likes. It's definitely not a webdesigner's "correct-solution", only my engineer's "just-get-it-working" style, but it does what I want it to do.
Anyways if any of you webdesigners would know how to address it properly, I'll be more than happy to hear it.
I have a <table> of data where consecutive rows are conceptually related and need to stay together. I've group each pair of rows in a <tbody> tag. When it comes time to print the table, I want to make sure that page breaks only happen between <tbody> tags.
I've tried some variations of page-break-inside: avoid and page-break-after: auto, but can't seem to get it to work in Chrome 42 (see screenshot below)
However, it does seems to work as expected in Firefox 40 and IE 11 though. It looks like page-break-* might only apply to block level elements. Is there a good way to accomplish this in html/css?
Example code:
<!doctype html>
<html>
<head>
<style>
table {
width: 70%;
border-collapse: collapse;
}
thead {
display: table-header-group;
text-align: left;
border-bottom: 2px solid #000;
}
tbody {
page-break-inside: avoid;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Project #</th>
<th>Owner</th>
<th>% Complete</th>
</tr>
</thead>
<tbody>
<tr>
<td>HR-123</td>
<td>Arther Dent</td>
<td>42%</td>
</tr>
<tr>
<td colspan='3'>Description: Find travel guide to get me back to earth.</td>
</tr>
</tbody>
<tbody>
<tr>
<td>RD-123</td>
<td>Frodo Baggins</td>
<td>9%</td>
</tr>
<tr>
<td colspan='3'>Description: Find a better way to get the ring to Mordor.</td>
</tr>
</tbody>
<!-- repeat tbody sections as necessary to get onto the second page -->
</table>
</body>
</html>
Here's a JSFiddle that'll give you a bit of an idea of what I'm trying to accomplish.
Edit: I considering not using a table but didn't since (i) I want my columns to line up, and (ii) I really don't want to hard-code column widths to make sure they're all the same.
Try wrapping it all in a
make that specific a block element (http://learnlayout.com/inline-block.html)
then use page-break-*
Do you know, why contenteditable=true, doesn't work in Opera?
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td contenteditable="true">This is a paragraph. It is editable.</td>
</tr>
</table>
</body>
</html>
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable
Opera version: 12.16, build 1860
Platform: Mac OS 10.9.1
The support is currently rather flaky. Browsers have not completely caught up yet.
The easiest solution until it is fully supported is to place a DIV or SPAN inside the cell and make that one editable. See the "Remarks" section on the related MSDN article.
You should also add a min-height style rule. If you leave that out it will shrink to 0px if there is no content in the cell, and the user will have a hard time clicking on it to grab the focus. Tab stops should work fine though.
Here's something I used for debugging:
TD > DIV[contenteditable="true"] {
border: 1px dashed blue;
min-height: 1em;
}
Your DOM structure would then look like this:
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td>
<div contenteditable="true">This is a paragraph. It is editable.</div>
</td>
</tr>
</table>
</body>
</html>
I have a project which requires printing an HTML table with many rows.
My problem is the way the table is printed over multiple page. It will sometimes cut a row in half, making it unreadable because one half is on the bleeding edge of a page and the remainder is printed on the top of the next page.
The only plausible solution I can think of is using stacked DIVs instead of a table and force page-breaks if needed.. but before going through the whole change I thought I could ask here before.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tbody>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
Note: when using the page-break-after:always for the tag it will create a page break after the last bit of the table, creating an entirely blank page at the end every time!
To fix this just change it to page-break-after:auto.
It will break correctly and not create an extra blank page.
<html>
<head>
<style>
#media print
{
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
}
</style>
</head>
<body>
....
</body>
</html>
Expanding from Sinan Ünür solution:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
div { page-break-inside:avoid; } /* This is the key */
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tr>
<td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
</tr>
<tr>
<td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
It seems that page-break-inside:avoid in some browsers is only taken in consideration for block elements, not for cell, table, row neither inline-block.
If you try to display:block the TR tag, and use there page-break-inside:avoid, it works, but messes around with your table layout.
None of the answers here worked for me in Chrome. AAverin on GitHub has created some useful Javascript for this purpose and this worked for me:
Just add the js to your code and add the class 'splitForPrint' to your table and it will neatly split the table into multiple pages and add the table header to each page.
Use these CSS properties:
page-break-after
page-break-before
For instance:
<html>
<head>
<style>
#media print
{
table {page-break-after:always}
}
</style>
</head>
<body>
....
</body>
</html>
via
I recently solved this problem with a good solution.
CSS:
.avoidBreak {
border: 2px solid;
page-break-inside:avoid;
}
JS:
function Print(){
$(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width", $(this).width() + "px") });
$(".tableToPrint tr").wrap("<div class='avoidBreak'></div>");
window.print();
}
Works like a charm!
I ended up following #vicenteherrera's approach, with some tweaks (that are possibly bootstrap 3 specific).
Basically; we can't break trs, or tds because they're not block-level elements. So we embed divs into each, and apply our page-break-* rules against the div. Secondly; we add some padding to the top of each of these divs, to compensate for any styling artifacts.
<style>
#media print {
/* avoid cutting tr's in half */
th div, td div {
margin-top:-8px;
padding-top:8px;
page-break-inside:avoid;
}
}
</style>
<script>
$(document).ready(function(){
// Wrap each tr and td's content within a div
// (todo: add logic so we only do this when printing)
$("table tbody th, table tbody td").wrapInner("<div></div>");
})
</script>
The margin and padding adjustments were necessary to offset some kind of jitter that was being introduced (by my guess - from bootstrap). I'm not sure that I'm presenting any new solution from the other answers to this question, but I figure maybe this will help someone.
I faced the same problem and search everywhere for a solution, at last, I fount something which works for me for every browsers.
html {
height: 0;
}
use this css or Instead of css you can have this javascript
$("html").height(0);
Hope this will work for you as well.
I checked many solutions and anyone wasn't working good.
So I tried a small trick and it works:
tfoot with style:position: fixed; bottom: 0px;
is placed at the bottom of last page, but if footer is too high it is overlapped by content of table.
tfoot with only: display: table-footer-group;
isn't overlapped, but is not on the bottom of last page...
Let's put two tfoot:
TFOOT.placer {
display: table-footer-group;
height: 130px;
}
TFOOT.contenter {
display: table-footer-group;
position: fixed;
bottom: 0px;
height: 130px;
}
<TFOOT class='placer'>
<TR>
<TD>
<!-- empty here
-->
</TD>
</TR>
</TFOOT>
<TFOOT class='contenter'>
<TR>
<TD>
your long text or high image here
</TD>
</TR>
</TFOOT>
One reserves place on non-last pages, second puts in your accual footer.
I have a face like this problem. You can solve this problem using CSS properties.
#media print {
table{page-break-after: auto;}
}
Note:
You can not use this property with empty or on absolutely positioned elements.
I've tried all suggestions given above and found simple and working cross browser solution for this issue. There is no styles or page break needed for this solution. For the solution, the format of the table should be like:
<table>
<thead> <!-- there should be <thead> tag-->
<td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>-->
</thead>
<tbody><!---<tbody>also must-->
<tr>
<td>data</td>
</tr>
<!--100 more rows-->
</tbody>
</table>
Above format tested and working in cross browsers
The accepted answer did not work for me in all browsers, but following css did work for me:
tr
{
display: table-row-group;
page-break-inside:avoid;
page-break-after:auto;
}
The html structure was:
<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
...
</tbody>
</table>
In my case, there were some additional issues with the thead tr, but this resolved the original issue of keeping the table rows from breaking.
Because of the header issues, I ultimately ended up with:
#theTable td *
{
page-break-inside:avoid;
}
This didn't prevent rows from breaking; just each cell's content.
Well Guys... Most of the Solutions up here didn't worked for. So this is how things worked for me..
HTML
<table>
<thead>
<tr>
<th style="border:none;height:26px;"></th>
<th style="border:none;height:26px;"></th>
.
.
</tr>
<tr>
<th style="border:1px solid black">ABC</th>
<th style="border:1px solid black">ABC</th>
.
.
<tr>
</thead>
<tbody>
//YOUR CODE
</tbody>
</table>
The first set of head is used as a dummy one so that there won't be a missing top border in 2nd head(i.e. original head) while page break.