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,

About Ronnie Diaz

Ronnie Diaz is an enterprise software engineer responsible for front-end and back-end development for companies in many industries. Heavily involved in cloud development, online retail, e-commerce and electronic ordering, fulfillment and customer relational systems.

Posted on November 9, 2012, in Programming & Development and tagged , , , , , , , , , , . Bookmark the permalink. 1 Comment.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: