I am collapsing table rows and using jQuery to toggle them. However, when the hidden rows are shown, the width of the td elements in the first tr are recalculated. This is exhibited on my example:
$("tr:first").click(function(){
$(this).next('tr').toggle();
});
tr{
display: none;
}
tr:first-of-type{
display: table-row;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr><td colspan="5">Hello</td><td colspan="3">World</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
</table>
(Fiddle if preferred: http://jsfiddle.net/8u070tkf/)
How can I force the flow of the hidden row, but still toggle the visibility of the second tr?
You would have better to toggle a class and set visibility CSS property:
$("tr:first").click(function(){
$(this).next('tr').toggleClass('shown');
});
CSS:
tr:not(:first-of-type):not(.shown){
visibility: hidden;
}
-DEMO-
Not really an answer, but a few hints eventually.
you may relay on colgroup and min-width , unfortunately, display:none; hides width of content.
table-layout and width on table is something to look at too.
http://jsfiddle.net/8u070tkf/2/
$("tr:first").click(function(){
$(this).next('tr').toggle();
});
tr{
display: none;
}
tr:first-of-type{
display: table-row;
}
col {
min-width:2.2em;
}
td {
background:yellow
}
<script src="http://code.jquery.com/jquery-compat-git.js"></script>
<table>
<colgroup><col/><col/> <col/><col/><col/> <col/><col/> <col/></colgroup>
<tr><td colspan="5">Hello</td><td colspan="3">World</td></tr>
<tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
</table>
Related
I have a table with row striping, set by CSS, and I also have a click function in jQuery. My code:
$(document).on('click', '.datarow', function() {
$(".datarow").removeClass("highlight");
$(this).addClass("highlight");
// other code for row select
});
#datatable tr:nth-child(odd) {
background-color: #fff;
cursor: pointer;
}
#datatable tr:nth-child(even) {
background-color: #fafafa;
cursor: pointer;
}
#datatable tr:hover {
background-color: #ddd;
}
#datatable tr .highlight {
background-color: #fbbc05;
}
<table id="datatable">
<tr class="datarow">...</tr>
...
</table>
The jQuery row highlighting doesn't work.
But, if I remove the CSS nth-child code, then the jQuery does work as expected.
So the CSS nth-child highlighting is over-ruling the jQuery highlighting the one row when clicked on.
How can I get both working together?
I tried following this answer how can I use jquery addClass when selecting a tr to override a nth-child class on a parent div? by increasing my ".highlight" to "#datatable tr .highlight" but still no luck.
How can I get both working together?
Well your CSS is incorrect to begin with:
#datatable tr .highlight {
background-color: #fbbc05;
}
Says an element inside a tr has a class of highlight but your jquery is applying the class directly to the tr so you should use:
#datatable tr.highlight {
background-color: #fbbc05;
}
The subtle difference is the single space between the tr and .highlight.
tr .hightlight {}
is VERY different from
tr.hightlight {}
I'd also HIGHLY recommend reading Decoupling Your HTML, CSS, and JavaScript. Your CSS is very tightly coupled to your html.
Here is a fiddle of the problem: https://jsfiddle.net/m5et9fwL/
Basically what the problem is is that when having a hidden class on a tr or td which should be hidden on the normal page but visible when printing, the colspan decides to stop working, as demonstrated by the fiddle. I've tried adding colspan directly to the CSS but this does not solve the issue either unfortunately.
Does anyone know what could be the cause for this and how would I go about solving this?
Markup:
<table>
<tr>
<td>Title</td>
<td>1123124i12049120491</td>
<td>1123124i12049120491</td>
<td>1123124i12049120491</td>
</tr>
<tr>
<td class="hidden" colspan="4">1130192301312312314124819248912849128491289481294812948192849128498129481294892849184294814</td>
</tr>
</table>
<button class="print">print page</button>
Print activation:
$('.print').on('click', function() {
window.print();
});
CSS:
.hidden {
display: none;
}
#media print {
.hidden {
display: block;
}
}
A td must have a table-cell display, not a block one.
Works here: https://jsfiddle.net/m5et9fwL/1/
.hidden {
display: none;
}
#media print {
.hidden {
display: table-cell;
}
}
Or, if the .hidden class is on a tr, the display property has to be table-row.
Use
#media print {
.hidden {
display: table-row;
}}
I am using dataTable jquery plugin.
I need to reduce the height of the rows, how can I do it? (I need a fixed height)
I tried:
.dataTables tbody tr {
min-height: 35px; /* or whatever height you need to make them all consistent */
}
JSFiddle
tr don't have height.
You'll have to apply the height to its tds
Click here to see the fiddle
CSS's padding will also do the trick - take a look at this example here. This came from this forum discussion.
Change the td padding CSS like this:
table.dataTable tbody th, table.dataTable tbody td {
padding: 1px 1px;
}
Set this in your CSS:
<style>
td {
white-space: nowrap;
max-width: 100%;
}
</style>
These DataTable options will make it even better:
scrollY: "530px",
scrollX: true,
scrollCollapse: true,
I want to be able to hover on a row and highlight all of it but I am having an issue with the code below since some cells have a different background.
<tr style="" onmouseover="this.style.background='Red';" onmouseout="this.style.background='#595959'" >
That is fine all all cells have the same background but if I click a cell it highlights it and onmouseout="this.style.background='#595959'" will always reset it.
How can I change that to something like:
onmouseout="this.style.background='currentCellBGColor"
It can be done with a pure CSS solution. No JavaScript needed
Pure CSS solution that will work in IE8+ all other modern day browsers
tr:hover td { background-color:yellow }
td.selected { background-color: green; }
tr:hover td.selected { background-color: lime; }
Fiddle
If you need IE7, you need to add a class onmosueover to the table row and remove the class onmouseout.
tr:hover td, tr.hover td { background-color:yellow }
td.selected { background-color: green; }
tr:hover td.selected, tr.hover td.selected { background-color: lime; }
Even if I agree that is better to make it with css hover, I like to answer to the question, how to do it with javascript.
You can save it on one attribute and use it to restore it as:
<script>
function setBackground(me, color)
{
me.setAttribute("data-oldback", me.style.background);
me.style.background=color;
}
function restoreBackground(me)
{
me.style.background = me.getAttribute("data-oldback");
}
</script>
and
<tr onmouseover="setBackground(this, 'Red');"
onmouseout="restoreBackground(this);"
style="background:blue;" >
and a test : http://jsfiddle.net/AdDgS/3/ and this http://jsfiddle.net/AdDgS/4/
I add a mouse event to the HTML TR when user mouse-over/out the TR to change some CSS color. But in IE9 seems to have an issue that the table's height will keep increasing each time the CSS changed.
Note: the issue only occurs when the horizontal scrollbar appears.
Here is the HTML.
<div style="width:100%;height:100%;">
<div class="grid">
<div class="grid-body">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;">
<tbody>
<tr>
<td style="width:3040px;" class="item">
<div>
Please mouse-over me and out
</div>
</td>
<td class="item">
<div>
Please mouse-over me and out
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Here is the Javascript
$(document).ready(function (){
$('.item').mouseover(function () {
$(this).parent().addClass("item-over");
}).mouseout(function() {
$(this).parent().removeClass("item-over");
});
}
);
Here is the CSS setting
html, body {height:100%}
body {
margin: 0; padding: 0 5px;
}
div.grid {
background: #DAE7F6; border: 1px solid #86A4BE; overflow: hidden; zoom: 1;
}
div.grid-body {
background: red; border: 0; overflow: auto; width: 100%; position: relative;
}
tr.item-over {
color: #6eadff;
}
You can run the full example here.
Here's another possible fix that also seems to work in my case.
Setting ANY margin (top, right, bottom, left, or any combination) to 'auto' seems to solve it.
div.grid-body {
margin: 0px auto;
}
Or:
div.grid-body {
margin-top: auto;
}
Etc.
Another possible fix suggested in the blog post IE9 Hover Bug Workaround:
div.grid-body {
min-height: 0%;
}
In case anyone came here looking for a fix for datatables jquery plugin, the proper class to add this fix to is:
.dataTables_scrollBody
{
margin-top:auto;
}
Took a bit of digging to find the proper div, so I figured I would try to save someone time.
I might have just solved it.
Try:
width: 100%;
display: inline-block;
on the containing element ("div.grid-body" in this case).
Open Developer tools and remove the table-layout:fixed rule from the table that is the child of grid-body. it should work may be.
It stops doing it and yet does the mouse hover effect by setting:
div.grid-body {
background: red; border: 0; overflow: hidden; width: 100%; position: relative;
}
instead of overflow:auto. Mabe you'd prefer to use overflow:scroll or visible. And make it trigger this as an extra property only for the IE9 case.
remove with form the first 'TD' element <td style="width:3040px;". It will help.
Do you need so huge "td" there ?
just to see
div.grid {
background: #DAE7F6; border: 1px solid #86A4BE; overflow: hidden;
zoom: 1;
width:100%;
}
what about this:
width:100% !important;
if you can change the overflow try this
div.grid-body {
background: red; border: 0; overflow: hidden; width: 100%; position: relative;
}
else
change your script to this (the problem is in the add/remove class)
$(document).ready(function (){
$('.item').mouseover(function () {
$(this).parent("tr").css("color", "#6eadff");
}).mouseout(function() {
$(this).parent("tr").css("color","#000");
});
});
why do you do it with JS and not with the css?
i.e:
.grid-body table tr:hover {background:red}
Maybe you should just "memorize" the height of the element in a variable when the mouseover event is fired, and then set it back to that value again when the mouseout event is fired.
$(document).ready(function (){
$('.item').mouseover(function () {
// store the height in a variabile (keep also in mind margins and paddings)
$(this).parent().addClass("item-over");
}).mouseout(function() {
$(this).parent().removeClass("item-over");
// now set back the original height
});
}
);
should work to just add a fixed height to the table row
so the containing table row reads:
<tr height="50px">
you can see it working here http://jsfiddle.net/f3TDb/
I'm assuming that you're not doing it wisth divs and css:hover for a specific reason?
i realize i'm months behind on this, but this stumped me yesterday and found this thread. hopefully my answer helps:
it's the overflow: auto in div.grid-body that's messing things up. you'll have to change this to scroll, possibly:
div.grid-body {
overflow-x: scroll;
}
if you don't want the vertical scrollbars.
note that you'll have to code your js to determine if you need a scrollbar so you can set overflow-x to visible (the default) if there are no overflows and scroll if there are, simulating auto.