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
Related
I have a table with 2 rows and 6 colums.
I was playing in inspect element and came with the solution I needed ( see picture below )
as you see it looks good now.
Once I applied it into the css of the website It looks like below:
CSS
style1 //Categorie
{
width:175px;
display:inline-block;
}
.style2
{
width: 175px; //Klant
}
.style3
{
width:175px; // Website
}
.style4
{
width:175px; // Titel
}
The code I entered was for the 1st tbl row( the dropdown Categorie ) to display:inline-block
Anyone has a clue how to result could be different?
I need to get "Klant" to the left, near "Categorie"
Remove the display tag and add a float: left to all style blocks
Also: You missed a point before style1
.style1 //Categorie
{
width:175px;
float: left;
}
.style2
{
width: 175px; //Klant
float: left;
}
.style3
{
width:175px; // Website
float: left;
}
.style4
{
width:175px; // Titel
float: left;
}
If that does not work, please post the html
From the screenshots, the only difference appears to be that the table is wider in the second one:
Is that what you're trying to resolve?
I suspect that your issue is simply that the table is flowing into a wider area (thus the columns are wider, and everything within the table falls further apart). Is it possible that the classes you've posted are assigned to the selects rather than to the table cells?
Best bet is to assign a width to the table if that's the case - you can do this by giving the table a class ans assigning the width in there, or directly into the table mark up itself (less-recommended).
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;
}
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.
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; }
What I am trying to find out is the proper syntax to apply some style to each individual td in my table below:
<section id="shows">
<!-- HTML5 section tag for the shows 'section' -->
<h2 class="gig">Shows</h2>
<ul class="gig">
<!-- Start the table -->
<table>
<tr>
<!-- Setup the header row -->
<th>When</th>
<th>Where</th>
<th>Start</th>
<th>Finish</th>
</tr>
<?php
// some PHP to fetch all the gig entries from the shows table
$shows_query = "SELECT * FROM shows ORDER BY date ASC";
$shows = mysql_query($shows_query);
// a loop to place all the values in the appropriate table cells
while ($show = mysql_fetch_array($shows)){
//begin the loop...
?>
<!-- Start the row -->
<tr>
<!-- Format the date value from the database and print it: -->
<td class="when"><?php
$date = date("l, F j, Y", strtotime($show['date']));
echo "$date";
?></td>
<td class="venue"><?php
echo $show['venue'];
?></td>
<!-- Format the start and end times and print them: -->
<td class="start"><?php
$time = date("G:i", strtotime($show['time']));
echo "$time";
?></td>
<td class="finish"><?php
$until = date("G:i", strtotime($show['until']));
echo "$until";
?></td>
<!-- Finish this row -->
</tr>
<!-- Some space before the next row -->
<div class="clear"></div>
<?php
// close the loop:
}
?>
<!-- Finish the table -->
</table>
</ul>
</section>
The styling that I have at the moment is:
#shows table.gig { font-size: 25px; }
#shows td.finish { margin-left: 50px;}
I did have a class for the table itself but not sure if it's necessary.
The font-size works but what I can't figure out is how to apply the style to the td, th, tr elements etc. I have tried several things but can't seem to get it to work!
Give the table a class name and then you target the td's with the following:
table.classname td {
font-size: 90%;
}
If I remember well, some CSS properties you apply to table are not inherited as expected. So you should indeed apply the style directly to td,tr and th elements.
If you need to add styling to each column, use the <col> element in your table.
See an example here: https://jsfiddle.net/GlauberRocha/xkuRA/2/
NB: You can't have a margin in a td. Use padding instead.
Try this
table tr td.classname
{
text-align:right;
padding-right:18%;
}
You can use the :first-child, :nth-child(N) and :last-child pseudo-classes.
They match elements based on their position in a group of siblings. In your case:
table td:first-child { /* 1st element */ }
table td:nth-child(2) { /* 2nd element */ }
table td:nth-child(3) { /* 3rd element */ }
table td:last-child { /* 4th element */ }
Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
A more definite way to target a td is table tr td { }
Simply create a Class Name and define your style there like this :
table.tdfont td {
font-size: 0.9em;
}
When using with a reactive bootstrap table, i did not find that the
table.classname td {
syntax worked as there was no <table> tag at all. Often modules like this don't use the outer tag but just dive right in maybe using <thead> and <tbody> for grouping at most.
Simply specifying like this worked great though
td.classname {
max-width: 500px;
text-overflow: initial;
white-space: wrap;
word-wrap: break-word;
}
as it directly overrides the <td> and can be used only on the elements you want to change. Maybe in your case use
thead.medium td {
font-size: 40px;
}
tbody.small td {
font-size:25px;
}
for consistent font sizing with a bigger header.