Develop Reference

CSS nth-child is over-riding jQuery click highlighting

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.

How do I change the print alignment for individual columns in DataTables?

I was able to use the customize function (given below) to modify the alignment in print layout, but unfortunately this applies to the whole table and all its columns.
How do I change the print alignment of individual columns (that I set and choose)?
My current code:
customize: function (win){ $(win.document.body).find('table').css('text-align', 'right'); },
Jsfiddle:
https://jsfiddle.net/6724x3LL/

First I tried this and it did not seem to work:
Js
"columnDefs": [ { className: "col_1",
"targets": [0] },
{ className: "col_2", "targets": [1] },
{ className: "col_3", "targets": [2] } ]
CSS
.dataTable tbody td.col_1 {
text-align: right;}
.dataTable tbody td.col_2 {
text-align: center;}
.dataTable tbody td.col_3 {
text-align: left;}
Setting classes for the columns in JavaScript using columnDefs, and then subsequently styling those classes in CSS only affected the html table render itself, the CSS was not carried over to the print layout.
However I was able to find a solution to this.
By using this script code within the customize option of print:
customize: function (win){
$(win.document.body).find('table tbody td:nth-child(1)').css('text-align', 'right');
Where each column would be set with the nth child.
Or alternatively use this pure CSS method:
.dataTable tbody tr td:nth-child(1) {
text-align: right;}
.dataTable tbody tr td:nth-child(2) {
text-align: center; }
.dataTable tbody tr td:nth-child(3) {
text-align: left; }

Prevent a hidden tr from breaking the td widths

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>

How to scroll table's "tbody" independent of "thead"?

As specified in the W3 specification for Tables:
Table rows may be grouped into a table head, table foot, and one or
more table body sections, using the THEAD, TFOOT and TBODY elements,
respectively. This division enables user agents to support scrolling
of table bodies independently of the table head and foot.
I created the following example, but it doesn't work.
HTML:
<table>
<thead>
<tr>
<td>Problem</td>
<td>Solution</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
JS:
$(function() {
for (var i = 0; i < 20; i++) {
var a = Math.floor(10 * Math.random());
var b = Math.floor(10 * Math.random());
var row = $("<tr>").append($("<td>").html(a + " + " + b + " ="))
.append($("<td>").html(a + b));
$("tbody").append(row);
}
});
CSS:
table {
background-color: #aaa;
}
tbody {
background-color: #ddd;
height: 100px;
overflow: auto;
}
td {
padding: 3px 10px;
}

The missing part is:
thead, tbody {
display: block;
}
Demo

I saw this post about a month ago when I was having similar problems. I needed y-axis scrolling for a table inside of a ui dialog (yes, you heard me right). I was lucky, in that a working solution presented itself fairly quickly. However, it wasn't long before the solution took on a life of its own, but more on that later.
The problem with just setting the top level elements (thead, tfoot, and tbody) to display block, is that browser synchronization of the column sizes between the various components is quickly lost and everything packs to the smallest permissible size. Setting the widths of the columns seems like the best course of action, but without setting the widths of all the internal table components to match the total of these columns, even with a fixed table layout, there is a slight divergence between the headers and body when a scroll bar is present.
The solution for me was to set all the widths, check if a scroll bar was present, and then take the scaled widths the browser had actually decided on, and copy those to the header and footer adjusting the last column width for the size of the scroll bar. Doing this provides some fluidity to the column widths. If changes to the table's width occur, most major browsers will auto-scale the tbody column widths accordingly. All that's left is to set the header and footer column widths from their respective tbody sizes.
$table.find("> thead,> tfoot").find("> tr:first-child")
.each(function(i,e) {
$(e).children().each(function(i,e) {
if (i != column_scaled_widths.length - 1) {
$(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()));
} else {
$(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()) + $.position.scrollbarWidth());
}
});
});
This fiddle illustrates these notions: http://jsfiddle.net/borgboyone/gbkbhngq/.
Note that a table wrapper or additional tables are not needed for y-axis scrolling alone. (X-axis scrolling does require a wrapping table.) Synchronization between the column sizes for the body and header will still be lost if the minimum pack size for either the header or body columns is encountered. A mechanism for minimum widths should be provided if resizing is an option or small table widths are expected.
The ultimate culmination from this starting point is fully realized here: http://borgboyone.github.io/jquery-ui-table/
A.

try this.
table
{
background-color: #aaa;
}
tbody
{
background-color: #ddd;
height: 100px;
overflow-y: scroll;
position: absolute;
}
td
{
padding: 3px 10px;
color: green;
width: 100px;
}

thead {
position: fixed;
height: 10px; /* This is whatever height you want */
}
tbody {
position: fixed;
margin-top: 10px; /* This has to match the height of thead */
height: 300px; /* This is whatever height you want */
}

mandatory parts:
tbody {
overflow-y: scroll; (could be: 'overflow: scroll' for the two axes)
display: block;
with: xxx (a number or 100%)
}
thead {
display: inline-block;
}

stop table cell from expanding, or set input to width of table cell

I have been playing around with this and cannot seem to get it functioning as I would like.
here is my example,
I have a table who's cells i'm making editable by replacing their text content with inputs when the user clicks on them. The input is removed after the focus is lost and the cell contents (the input) are replaced by the updated text.
This all works, fabulous. My issue is the cells resize themselves after the text is replaced by the input.
I have set the width of the input to 100%, but that is all I can think of (aside from measuring the cell width and hard-coding it to that width, however I would like to avoid this if possible.)
(see example for html content)
css assume table has ID of #tblListings
#tblListings {
width: 100%;
}
#tblListings thead {
background-color: #dedede;
}
#tblListings td, #tblListings th {
padding: 6px;
border: 1px solid #adadad;
border-bottom: none;
}
#tblListings tbody tr:nth-child(even) td {
background-color: #efefef;
}
#tblListings tbody tr:last-child td {
border-bottom: 1px solid #adadad;
}
#tblListings td input {
width: 100%;
border: none;
outline: none;
background-color: #ff0;
}
javascript I would presume this can be achieved with CSS, however I will post this to be safe.
$("#tblListings tbody").on("click", "td", function(event) {
if (event.target.tagName === "INPUT") return;
var cell = $(this);
var input = $("<input>", {
type: "text",
value: cell.text(),
maxlength: 128
});
cell.empty().css("padding", 0).append(input);
input.focus();
input.on("blur", function() {
cell.css("padding", 6).text(this.value);
});
});

One way to do it would be to set the input to have absolute positioning but keep the original contents in the cell to keep the width the same. See the update here: http://jsfiddle.net/V6rsC/29/.
What I did was set the cell to have relative positioning so that when I set the bounds of the input, it would use the cell instead of the document. I set left, top, right, and bottom of the input to 0px. The width remains the same because the contents are still there, but we cannot see them because the input is in the way. When we are done, the contents are replaced anyway, so know one ever knows the difference.