I'm setting a global font-size and line-height on my <body> tag, so all default body copy is 14px and a 1.3em line-height.
The problem is as I have tables that have a larger font-size, and instead of inheriting a relative line-height, it's taking the computed value from the <body> tag. As a result the text overlaps:
Here is a code pen: https://codepen.io/thedigitalmc/pen/xxZJjyy
<body>
<style type="text/css">
body {
font-size:13px;
line-height:1.3em
}
td {
font-size:30px
}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>This Is Text<br>On Two Lines</td>
</tr>
</tbody>
</table>
</body>
Is there a better way to do this, I don't really want to do body * {line-height:1.3em} but it seems the best solution.
Do not use the relative em unit if you want the line height to maintain a constant ratio with the font size. Simply set line-height: 1.3 instead.
body {
font-size:13px;
line-height:1.3;
}
td {
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>This Is Text<br>On Two Lines</td>
</tr>
</tbody>
</table>
</body>
</html>
I have a html table with several columns. In case the table does not fit in the page horizontally, I would like all but one column to collapse (instead of a horizontal scrollbar to appear on the page).
By collapse I mean: hiding the part of the content that does not not fit inside the cell.
How can I do that?
html:
<table>
<tr>
<td>this can collapse</td>
<td>this can collapse</td>
<td class="nocollapse">this should not collapse</td>
<td>this can collapse</td>
</tr>
</table>
css:
table {
width: 100%;
max-width:100%;
}
td {
border: 1px solid black;
white-space: nowrap;
overflow: hidden;
}
td.nocollapse {
overflow: none;
}
The button just shows the effect of a script that would collapse the columns. Use the code of the button's onclick function for if the screen width is too small.
<!DOCTYPE html>
<html>
<head>
<style>
tr, td {border:solid 1px black;padding:3px;}
</style>
</head>
<body>
<table>
<tr>
<td class="collapse">this can collapse</td>
<td class="collapse">this can collapse</td>
<td>this should not collapse</td>
<td class="collapse">this can collapse</td>
</tr>
</table>
<button onclick="for (var el of document.querySelectorAll('td.collapse'))el.style.display='none';">Collapse</button>
</body>
</html>
If you use jQuery, this becomes even easier with the button looking like: <button onclick="$('td.collapse').hide();">Collapse</button>
I have 3 tables that I use. I want :
one on the page left
one on the page in the center and
one on the right
All on the same height
The tables can expand and when I use float the expanding goes over the content under it due to the float and I dont want that.
Table code is:
<table id="budget">
<tr>
<th>Project name</th>
<th>Deadline</th>
<th></th>
</tr>
<tr>
<td>Project 1</td>
<td>24/1/2014</td>
<td><div class="arrow"></div></td>
</tr>
<tr><ul>
<td colspan="5">
<li> Your total hours: 3:00</li>
<li>Budget left: €100</li>
</ul>
</td>
</tr>
</table>
OR is there maybe a better way to place these tables? I am open for new suggestions.
A 3 column layout
HTML
<div id="container">
<div class='left third'>
<table>
</table>
</div>
<div class='centre third'>
<table>
</table>
</div>
<div class='right third'>
<table>
</table>
</div>
</div>
CSS
div.third{
width:33%;
}
div.left{
float:left;
}
div.right{
float:right;
}
div.centre{
float:right;
}
/* This will centre the middle table */
div.centre table{
width:#####px
margin: 0 auto;
}
Notes:
1) Width is 33%, not 33.3% to prevent come browsers from wrapping the right column.
2) DO NOT set margins for the columns
3) If possible, use a standard library such as Bootstrap
you can just use margins in css such as:
margin-left:.....
margin-right:....
margin-top:.....
margin-bottom:....
to do it this way you may have to give your td's and th's different id's so you can control them separately
I think you are saying you need three rows/columns in one table whose content is bound to expand.
In header append the stylesheet using
<link rel="stylesheet" href="q1.css" type="text/css">
CODE
<table >
<tr >
<th >Project name</th>
<th>Deadline</th>
<th></th>
</tr>
<tr >
<td>Project 1</td>
<td>24/1/2014</td>
<td><div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div></td>
</tr>
<tr>
<td colspan="5">
<ul>
<li> Your total hours: 3:00</li>
<li>Budget left: €100</li>
</ul>
</td>
</tr>
</table>
css code
table,th,td
{
border : 1px solid black;
border-collapse : collapse;
}
td{
width:10px;
height:10px;
overflow:auto;
}
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
If the table is overlapping other contents in the page then you could you css
clear:both;
The clear property specifies which sides of an element other floating elements are not allowed.
How do you make individual table columns fixed for a certain width so no matter how much text is in that column, the width of the column stays the same?
<col> tag is only good for firefox
table-layout:fixed is for whole table really
Just setting a width does not do it
what is the best css property to use for this
Below is code:
.video{
overflow:hidden;
table-layout:fixed;
max-width:146px;
}
.audio{
overflow:hidden;
table-layout:fixed;
max-width:146px;
}
.image{
overflow:hidden;
table-layout:fixed;
max-width:146px;
}
.qid2{
overflow:hidden;
table-layout:fixed;
max-width:92px;
}
<table border=1 id="vidtbl">
<tr>
<th>Question No</th>
<th>Video</th>
<th>Audio</th>
<th>Image</th>
</tr>
<tr>
<td class="qid2"></td>
<td class="video">images/dolphinvideo.png//////////////////////////////////////</td>
<td class="audio">hello</td>
<td class="image"></td>
</tr>
</table>
You can wrap the contents of the <td> in another tag with width and overflow:hidden. For example:
<table>
<tr>
<td class="fifty">
<p>Lorem ipsum dolor</p>
</td>
</td>
</table>
And the CSS:
.fifty p { overflow:hidden; width:50px; }
You can use width attribute in td tag
<td width="100px">
or you can use style attribute
<td style="width:100px">
or you can define it in css file
.tdstyle{
width:100px;
}
and specify the class in td tag
<td class="tdstyle">
If setting td's width to a fix value does not work for you:
<td width="100">..</td> or <td style="width:100px">...</td>
Wrapped the content to a div and set the overflow as hidden:
<td><div style="width:100px;overflow:hidden;">...</div></td>
Css class will be much efficient and easy to maintain though:
.col120 { width:120px; overflow:hidden;}
<td><div class="col120">content...</div></td>
try using
max-width:100px;
or
max-height:100px;
This will let your column expand maximum upto the width you set.
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.