my problem is, that I have two different html files with a table containing theader, tfooter and tbody.
the first one is my own creation for test reasons and it looks like this:
<html>
<head>
<title>The Invoice</title>
<style type="text/css">
table.invoice { background-color: #dddddd; font-family: sans-serif; }
td, th { background-color: #ffffff; padding: 5pt; }
td.unit { text-align: right; }
td.price { text-align: right; }
thead { display: table-header-group; }
tfoot th { text-align: right; }
</style>
</head>
<body>
<div style="width:auto !important; overflow:hidden; position:relative">
<table class="invoice" cellspacing="1" cellpadding="0">
<thead>
<th>Unit</th>
<th>Description</th>
<th>Price</th>
</thead>
<tfoot>
<tr>
<th colspan="2">Sum</th>
<td class="price">1.230,32 EUR</td>
</tr>
</tfoot>
<tbody>
<tr><td>1</td><td>Excel</td><td >150,00 EUR</td></tr>
<tr><td>2</td><td>Document</td><td>150,00 EUR</td></tr>
... and so on ...
</tbody>
</table>
</div>
</body>
</html>
whenever I try the print preview on IE9 it shows the tfoot on the last page (page 5 in my case) which shows the overall sum of the body content price column.
when I try the same in Mozilla Firefox 11.0 it shows the tfoot with the overall sum on every page which I don't want of course.
the main reason I'm asking is because I have a FreeAgent html dom where I want to print out some Invoice. With that html file even IE9 shows the tfoot on every page, which, again!, I don't want.
I played around with
#media print { tfoot { display: table-footer-group;
position: absolute;
bottom: 0; }}
there it shows the footer just once, but on the first page at the bottom left all accross the rest of my text ...
ideas or solutions much appreciated! :)
Try this CSS in your print stylesheet, it will make the tfoot act as another row yet keeping the proper syntax that something like Datatables.net needs.
table tfoot{display:table-row-group;}
The tfoot is actually supposed to "always be visible at the bottom" (or something along those lines), so it makes sense for Firefox to print the footer at the bottom of the table on every page.
In particular this is useful for if you have table header cells to name columns, or are using the footer as a label or repeated headers.
You should probably have your sum as just another row on the end of the table.
Related
I need to overwrite some CSS in a Drupal back office (I can't change the CSS) and I tried to follow the instructions of this stackoverflow question.
So I made the following code :
EDIT
<style type="text/css">.maclasse div {
background: #ffffff;
overflow:auto;
width:auto;
}
.maclasse2 tbody tr td {
text-align: left;
}
</style>
And then, in the HTML I used my side classes :
<div class="maclasse maclasse2">
<table class="maclasse2">
<tbody>
<tr>
<td>
<pre style="margin: 0; line-height: 125%">
....
But it is not working ; the inspection of the page shows that :
In td, the text-align is still centered and we can see the override is denied. What do I need to add to my code ?
if just text in html like this code
<td class= "montd">
...
<span>text</span>
...
</td>
in css selected like this
.montd span {
text-align: left;
}
I have a table in html, containing this structured data:
<table>
<tr><td>label1</td><td>value1</td></tr>
<tr><td>label2</td><td>value2</td></tr>
<tr><td>label3</td><td>value3</td></tr>
...
</table>
This is a long list. I would like to be able to but each n+1-th row next to the n th row, like this:
<table>
<tr><td>label1</td><td>value1</td></tr><tr><td>label2</td><td>value2</td></tr>
<tr><td>label3</td><td>value3</td></tr><tr><td>label4</td><td>value4</td></tr>
...
</table>
So the structure stays the same, but the CSS layout would take care of putting each second row on the right, so the users sees 2 columns of (field, value) in one row.
Any hints?
UPDATE:
This trick will do it, but destroys the table-layout, so not usable.
TABLE TR
{
float:left;
}
TABLE TR:nth-child(2n+1)
{
float:left;
clear:both;
}
Try out and let know is that you want?
Your Html
<table>
<tr><td>label1</td><td>value1</td></tr>
<tr><td>label2</td><td>value2</td></tr>
<tr><td>label3</td><td>value3</td></tr>
<tr><td>label4</td><td>value4</td></tr>
<!-- more stuff here -->
</table>
CSS:
tr {
float: left;
}
tr:nth-child(2n+1) {
clear: left;
padding-right: 10px; /* You can edit this line and add as per your style */
}
Works fine in Chrome, Safari, Firefox. Not checked in IE
Example
All,
I have an ASP.NET GridView that is rendered to an HTML table.
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
<tr><td>Data 3</td><td>Data 4</td></tr>
</table>
I want to highlight the row when the mouse is hovered over it - except for the first row which is the header.
I am just getting my head wet with JQuery, and have dabbled a bit with CSS (either CSS2 or CSS3). Is there a preferred way to do this?
Can anyone give me a starting point for this?
Cheers
Andez
There is a way to achieve the desired behavior without class-ing each row separately. Here's how to highlight each table row except for first one (header) on hover using the CSS :not and :first-child selectors:
tr:not(:first-child):hover {
background-color: red;
}
Unfortunately, IE < 9 does not support :not, so to do this in a cross-browser way, you can use something like this:
tr:hover {
background-color: red;
}
tr:first-child:hover {
background-color: white;
}
Basically, the first CSS rule includes all rows. To avoid highlighting the first row, you override the its hover style by selecting with tr:first-child and then keeping its background-color to white (or whatever the non-highlighted row's color is).
I hope that helped, too!
To expand on user2458978's answer surely the best way of doing this is to code up the tables correctly.
<table>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
Then the CSS is simply
table tbody tr:hover { background-color: red; }
Here's a jsFiddle example
You can do this using the CSS :hover specifier. Here's a demonstration:
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr class = "notfirst"><td>Data 1</td><td>Data 2</td></tr>
<tr class = "notfirst"><td>Data 3</td><td>Data 4</td></tr>
</table>
CSS:
.notfirst:hover {
background-color: red;
}
1. Place header tr inside thead tag
2. Place other tr inside tbody tag
3. Use following css
table tr:not(thead):hover {
background-color: #B0E2FF;
}
Use TH tag for first row and do that:
th {
background-color:#fff;
}
For all others rows:
tr:not(:first-child):hover {
background-color:#eee;
}
or
tr:hover td {
background-color:#eee;
}
Use jQuery to add a class to the parent element of the td (wont select th)
$('td').hover(function(){
$(this).parent().addClass('highlight');
}, function() {
$(this).parent().removeClass('highlight');
});
Then add the CSS class
.highlight {
background:red;
}
Why not simply use
tr>td:hover {
/* hover effect */
background-color: lightblue;
}
This will only affect table rows with td's inside, not table rows with th's inside.
Works in all browsers. Cheers, guys.
Why not something like:
tr:first-child ~ tr { background-color:#fff; }
As of my requirement, I have to highlight all the even rows except header row.
Hence, this answer might not be suitable to the above question.
Even then, I am giving my answer here with the hope that somebody else can use my answer if they encounter this page in search engine search.
My answer is:
$("#tableName tr:even").not("tr:nth(0)").addClass("highlight");
If your table is standard, you have a table like this:
<table>
<thead>
<tr>
<th>title</th>
</tr>
</thead>
<tbody>
<tr>
<th>cell</th>
</tr>
</tbody>
</table>
so you can use this css code:
table > *:not(thead) tr:hover{
background-color: #f5f5f5;
}
I have a dynamic table in my web page that sometimes contains lots of rows. I know there are page-break-before and page-break-after CSS properties.
Where do I put them in my code in order to force page breaking if needed?
You can use the following:
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
</style>
Refer the W3C's CSS Print Profile specification for details.
And also refer the Salesforce developer forums.
Wherever you want to apply a break, either a table or tr, you needs to give a class for ex. page-break with CSS as mentioned below:
/* class works for table row */
table tr.page-break{
page-break-after:always
}
<tr class="page-break">
/* class works for table */
table.page-break{
page-break-after:always
}
<table class="page-break">
and it will work as you required
Alternatively, you can also have div structure for same:
CSS:
#media all {
.page-break { display: none; }
}
#media print {
.page-break { display: block; page-break-before: always; }
}
Div:
<div class="page-break"></div>
I have looked around for a fix for this. I have a jquery mobile site that has a final print page and it combines dozens of pages. I tried all the fixes above but the only thing I could get to work is this:
<div style="clear:both!important;"/></div>
<div style="page-break-after:always"></div>
<div style="clear:both!important;"/> </div>
Unfortunately the examples above didn't work for me in Chrome.
I came up with the below solution where you can specify the max height in PXs of each page. This will then splits the table into separate tables when the rows equal that height.
$(document).ready(function(){
var MaxHeight = 200;
var RunningHeight = 0;
var PageNo = 1;
$('table.splitForPrint>tbody>tr').each(function () {
if (RunningHeight + $(this).height() > MaxHeight) {
RunningHeight = 0;
PageNo += 1;
}
RunningHeight += $(this).height();
$(this).attr("data-page-no", PageNo);
});
for(i = 1; i <= PageNo; i++){
$('table.splitForPrint').parent().append("<div class='tablePage'><hr /><table id='Table" + i + "'><tbody></tbody></table><hr /></div>");
var rows = $('table tr[data-page-no="' + i + '"]');
$('#Table' + i).find("tbody").append(rows);
}
$('table.splitForPrint').remove();
});
You will also need the below in your stylesheet
div.tablePage {
page-break-inside:avoid; page-break-after:always;
}
this is working for me:
<td>
<div class="avoid">
Cell content.
</div>
</td>
...
<style type="text/css">
.avoid {
page-break-inside: avoid !important;
margin: 4px 0 4px 0; /* to keep the page break from cutting too close to the text in the div */
}
</style>
From this thread: avoid page break inside row of table
When converting to PDF with SelectPdf I couldn't get a group of rows to stay together. Tried to put them in a <div style="break-inside: avoid;"> but that didn't work.
Nothing was working until I found this: https://stackoverflow.com/a/27209406/11747650
Which made me rethink my logic and place the things I didn't want to split inside a <tbody>.
<table>
<thead style="display: table-header-group;">
<tr>
<th></th>
</tr>
</thead>
-- Repeating content --
<tbody style="break-inside: avoid;">
-- First row from group --
<tr>
<td> Only shown once per group </td>
</tr>
-- Repeating rows --
<tr>
<td> Shown multiple times per group </td>
</tr>
</tbody>
This results in a table that has multiple <tbody> but that's something that is completely fine as many people use this exact pattern to group together rows.
If you know about how many you want on a page, you could always do this. It will start a new page after every 20th item.
.row-item:nth-child(20n) {
page-break-after: always;
page-break-inside: avoid;
}
I eventually realised that my bulk content that was overflowing the table and not breaking properly simply didn't even need to be inside a table.
While it's not a technical solution, it solved my problem to simply end the table when I no longer needed a table; then started a new one for the footer.
Hope it helps someone... good luck!
Here is an example:
Via css:
<style>
.my-table {
page-break-before: always;
page-break-after: always;
}
.my-table tr {
page-break-inside: avoid;
}
</style>
or directly on the element:
<table style="page-break-before: always; page-break-after: always;">
<tr style="page-break-inside: avoid;">
..
</tr>
</table>
We tried loads of different solutions mentioned here and elsewhere and nothing worked for us. However we eventually found a solution that worked for us and for us it seems to somehow be an Angular issue. I don't understand why this works, but for us it does and we didn't need any page break css in the end.
#media print {
ng-component {
float: left;
}
}
So just hoping this helps someone else as it took us days to fix.
You should use
<tbody>
<tr>
first page content here
</tr>
<tr>
..
</tr>
</tbody>
<tbody>
next page content...
</tbody>
And CSS:
tbody { display: block; page-break-before: avoid; }
tbody { display: block; page-break-after: always; }
I am using a table with alternate row color with this.
tr.d0 td {
background-color: #CC9999;
color: black;
}
tr.d1 td {
background-color: #9999CC;
color: black;
}
<table>
<tr class="d0">
<td>One</td>
<td>one</td>
</tr>
<tr class="d1">
<td>Two</td>
<td>two</td>
</tr>
</table>
Here I am using class for tr, but I want to use only for table. When I use class for table than this apply on tr alternative.
Can I write my HTML like this using CSS?
<table class="alternate_color">
<tr><td>One</td><td>one</td></tr>
<tr><td>Two</td><td>two</td></tr>
</table>
How can I make the rows have "zebra stripes" using CSS?
$(document).ready(function()
{
$("tr:odd").css({
"background-color":"#000",
"color":"#fff"});
});
tbody td{
padding: 30px;
}
tbody tr:nth-child(odd){
background-color: #4C8BF5;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>
There is a CSS selector, really a pseudo-selector, called nth-child. In pure CSS you can do the following:
tr:nth-child(even)
background-color: #000000;
}
Note: No support in IE 8.
Or, if you have jQuery:
$(document).ready(function()
{
$("tr:even").css("background-color", "#000000");
});
You have the :nth-child() pseudo-class:
table tr:nth-child(odd) td{
...
}
table tr:nth-child(even) td{
...
}
In the early days of :nth-child() its browser support was kind of poor. That's why setting class="odd" became such a common technique. In late 2013 I'm glad to say that IE6 and IE7 are finally dead (or sick enough to stop caring) but IE8 is still around — thankfully, it's the only exception.
Just add the following to your html code (withing the <head>) and you are done.
HTML:
<style>
tr:nth-of-type(odd) {
background-color:#ccc;
}
</style>
Easier and faster than jQuery examples.
can i write my html like this with use
css ?
Yes you can but then you will have to use the :nth-child() pseudo selector (which has limited support though):
table.alternate_color tr:nth-child(odd) td{
/* styles here */
}
table.alternate_color tr:nth-child(even) td{
/* styles here */
}
We can use odd and even CSS rules and jQuery method for alternate row colors
Using CSS
table tr:nth-child(odd) td{
background:#ccc;
}
table tr:nth-child(even) td{
background:#fff;
}
Using jQuery
$(document).ready(function()
{
$("table tr:odd").css("background", "#ccc");
$("table tr:even").css("background", "#fff");
});
table tr:nth-child(odd) td{
background:#ccc;
}
table tr:nth-child(even) td{
background:#fff;
}
<table>
<tr>
<td>One</td>
<td>one</td>
</tr>
<tr>
<td>Two</td>
<td>two</td>
</tr>
</table>
Most of the above codes won't work with IE version. The solution that works for IE+ other browsers is this.
<style type="text/css">
tr:nth-child(2n) {
background-color: #FFEBCD;
}
</style>
<script type="text/javascript">
$(function(){
$("table.alternate_color tr:even").addClass("d0");
$("table.alternate_color tr:odd").addClass("d1");
});
</script>
You can use nth-child(odd/even) selectors however not all browsers (ie 6-8, ff v3.0) support these rules hence why most solutions fall back to some form of javascript/jquery solution to add the classes to the rows for these non compliant browsers to get the tiger stripe effect.
There is a fairly easy way to do this in PHP, if I understand your query, I assume that you code in PHP and you are using CSS and javascript to enhance the output.
The dynamic output from the database will carry a for loop to iterate through results which are then loaded into the table. Just add a function call to the like this:
echo "<tr style=".getbgc($i).">"; //this calls the function based on the iteration of the for loop.
then add the function to the page or library file:
function getbgc($trcount)
{
$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
if($odd==1){return $blue;}
else{return $green;}
}
Now this will alternate dynamically between colors at each newly generated table row.
It's a lot easier than messing about with CSS that doesn't work on all browsers.
Hope this helps.
Please try this way: it can use in Html file for WebView
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: Lightgreen;
}
</style>
</head>
Alternating rows selector
Here is how it works and how you can for example use the modulo to alternate between rows of several different colors (here 3):
ol>li:nth-child(3n+1) {
background-color: blue;
}
ol>li:nth-child(3n+2) {
background-color: green;
}
/* The following selector is equivalent to "nth-child(3n)" */
ol>li:nth-child(3n+3) {
background-color: red;
}
<ol>
<li />
<li />
<li />
<li />
<li />
<li />
<li />
<li />
<li />
</ol>
As it as already been stated, rows indexes used in the selector starts from 1 (and not 0). That's why the selector of the 1st, 4th, 7th rows is nth-child(3n+1).
How the selector reads
The selector nth-child(Mn+k) for a row of index i reads as if (i % M == k). For example, if we want to select all rows whose base 3 modulo is equal to 2 we would write in CSS nth-child(3n+2), in other (javascript) words, the selector does this:
const M = 3;
const k = 2;
for (let i = 1; i < 10; i+=1){
// The `nth-child(Mn+k)` selector:
if (i % M == k){
console.log(`${i} selected`);
}
}
Outputs
2 selected
5 selected
8 selected