change last row cell style in css and javascript cross browser compatibility issues
There are various approaches to achieve this functionality with equally different levels of compatibility across browsers. Here are some of the ways.
Javascript Approach (most compatible. you may recognize this code from another one of my articles.):
function ChangeTableCellStyle(tableid,cellnumber,mystyle) { if (document.getElementById) { var selectedElement = document.getElementById(tableid); selectedElement.className = style; //change style on end cell by drilling into table. this will eventually become completely replaced by css3 if (selectedElement.tagName.toLowerCase()=="table") { var tbody = selectedElement.lastChild; if (tbody!=null) { if (tr.nodeType!=1) { tr.tbody.getElementsByTagName("td"); tr[cellnumber].className+= ' ' + mystyle; } } } } }
HTML col tags and hardcoded inline style overrides (easy, but messy IMO. also definitely not a good approach for styling lots of similar looking pages)
<table> <col style="background-color: #6374AB; color: #ffffff" /> <col span="2" style="background-color: #07B133; color: #ffffff;" /> <tr> <td style="background-color: #000000">First TD of first TR</td> [... etc ...] <tr style="background-color: #6374AB;"> // second TR
CSS3 last child (super clean and awesome but unfortunately not well supported by browsers)
p:last-child { ⋮ declarations }
jQuery Approach (this also has good compatibility and much cleaner than your own JS function, but requires an external jquery library reference which may be overkill unless you’re already using it):
$(document).ready(function() { $('table.class tr:last-child').addClass('ClassName'); //can also speciy firstchild etc });
Some of the snippets above are quoted snippets directly from references below. See the reference links for more information on a specific approach.
As the above examples have illustrated there are many ways to achieve what you need each varying depending on your implementation. Hope this article helped! Enjoy.
References
CSS fixed table approachhttp://stackoverflow.com/questions/359821/styling-the-last-td-in-a-table-with-css
HTML col tags approach, http://www.quirksmode.org/css/columns.html
css3 approach, http://reference.sitepoint.com/css/pseudoclass-lastchild
jQuery approach, http://stackoverflow.com/questions/5850835/jquery-selector-to-last-row-first-column
Posted on November 9, 2012, in Programming & Development and tagged browser, cell, change, change cell style, column, compatibility, css, css3, javascript, row, style. Bookmark the permalink. 1 Comment.
Pingback: lastChild is null in FireFox works in IE invalid nodeType javascript c# asp .net « Fraction of the Blogosphere