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

Advertisements

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: