Blog Archives

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[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)

<col style="background-color: #6374AB; color: #ffffff" />
<col span="2" style="background-color: #07B133; color: #ffffff;" />

<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.

CSS fixed table approach
HTML col tags approach,
css3 approach,
jQuery approach,