Not CSS. display:none doesn't remove the cell, just hides it.

If you know that the maximum number of cells will be 3, then you could do the following:

<tr>
<td>Bob</td>
<td>Frank</td>
<td style="display:none"></td>
</tr>
<tr>
<td>Max</td>
<td>James</td>
<td style="display:none"></td>
</tr>
<tr>
<td>Gina</td>
<td>Steph</td>
<td>Elliot</td>
</tr>

You're better off just letting the blank cells show.

In this particular case, however, I'd suggest using <div> tags, not <table> tags. <div> tags are better for arbitrary counts and dynamic formatting.

I don't use JavaScript to control page layout unless I have no other recourse.

Yeh I know its a pain in the @$$! Actually I do know that there will always be 2 rows so any <td> after the 2nd in each <tr> should not be displayed. Any ideas on how to do this with javascript? I can't change the table code which is why I need to use css or javascript! I was researching and found something along the lines of this:

var items = document.getElementsByTagName('tr');
for (var i=0; i<items.length; i++) {
//do something
}

Not really sure how it would then loop through the correct <td>'s within the <tr> though...?

var items = document.getElementsByTagName('tr');
for (var i=0; i<items.length; i++) {
//do something
}

ick.

This is probably what you need:

var items = document.getElementsByTagName('tr');
for (var i=0; i<items.length; i++) {
//not exactly sure how to get contained elements, but it's probably simple
var _tds = items[i].howeverYouGetAContainedElementList;
for(i2=0; i2<_tds.length; i2++){
if(_tds[i2].innerHTML==''){
_tds[i2].style.display="none";
}
}

Or something like that (completely untested).

Yuck.

Try not to use JavaScript for this.

Eeeww...

Managed to work it out at last...

function hide_extra_cells() {
// This is the total number of cells that should be in the table, any extras will be cut off!
var total = 2;

var trs = document.getElementsByTagName("tr");
for (var i=0; i<trs.length; i++) {
var tds = trs[i].getElementsByTagName("td");
for (var j=total; j<tds.length; j++) {
tds[j].style.display = "none";
}
}
}

Thanks!