tags:

views:

5519

answers:

12

I want to style the last TD in a table without using a CSS class on the particular TD.

<table>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
    </tr>
  </tbody>
</table>

table td 
{ 
  border: 1px solid black;
}

I want the TD containing the text "Five" to not have a border but again, i do not want to use a class.

Thanks.

+3  A: 

You can use relative rules:

table td + td + td + td + td {
  border: none;
}

This only works if the number of columns isn't determined at runtime.

sblundy
heh - you love this approach!
nickf
It has its uses, especially if you, like this guy, don't want to have to change the HTML too much to support the CSS.
sblundy
That works! Thanks. Yes the HTML is static and I don't want to add a bunch of css classes or id to style the cells.
haha ok ok - fair enough. Be aware of its lack of IE support though...
nickf
@vchoke: if you are happy with sblundy's solution, don't forget to accept it.
PhiLho
Amusing trick, but it is less flexible than :last-child and doesn't work better on IE... Still worth remembering!
PhiLho
+7  A: 

:last-child selector should do it, but it's not supported in any version of IE.

I'm afraid you have no choice but to use a class.

yoavf
You spoke too soon, apparently there was a hack to avoid using a class =)
Albert
+4  A: 

Javascript is the only viable way to do this client side (that is, CSS won't help you). In jQuery:

$("table td:last").css("border", "none");
nickf
One down side to this is that it breaks the content/style/behaviour model.
Christopher Done
A: 

you could use the last-child psuedo class

table tr td:last-child {
    border: none;
}

This will style the last row only. It's not fully supported yet so it may be unsuitable

Neil Aitken
+1  A: 

Not a direct answer to your question, but using <tfoot> might help you achieve what you need, and of course you can style tfoot.

Khnle
no it won't. he's talking about the last CELL not the last ROW.
nickf
+3  A: 

If you are already using javascript take a look at jQuery. It supports a browser independent "last-child" selector and you can do something like this.

$("tr:last-child").css({border:"none"})
joshperry
td:last-child, you mean?
nickf
no, last-child means the last child of the parent, so my selector says "give me the last child of the row"
joshperry
Thanks, I used it to bold a Total line in table. Very easy.
Rick
For many cases this works perfectly, but just beware if you are changing classes, remember that this will set the style on that item once, and that property won't change dynamically with CSS class changes anymore.
Renesis
+1  A: 

For IE, how about using a CSS expression:

<style type="text/css">
table td { 
  h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : '1px solid #000' ) );
}
</style>
Liggy
+1  A: 

You can use the col element as specified in HTML 4.0 (link). It works in every browser. You can give it an ID or a class or an inline style. only caveat is that it affects the whole column across all rows. Example:

<table>
    <col />
    <col width="50" />
    <col id="anId" />
    <col class="whatever" />
    <col style="border:1px solid #000;" />
    <tbody>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
        </tr>
    </tbody>
</table>
Darko Z
My example is inverse of what you wanted to do but you get what I mean :)
Darko Z
A: 

how can we use an image insted of borders using this expressions in the css files

A: 
this method only works in IE
fudgey
+1  A: 

In jQuery, provided the table is created either statically or dynamically prior to the following being executed:

$("table tr td:not(:last-child)").css({ "border-right":"1px solid #aaaaaa" });

Just adds a right border to every cell in a table row except the last cell.

Jim R.
A: 

There is also a different approach.. and this would work for tables that aren't static... basically use <th> instead of <td> for that column:

<style type="text/css">
 table td { border: 1px solid black; }
 table th { border: 0px; }
<style>
<table>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <th>Five</th>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <th>Five</th>
    </tr>
  </tbody>
</table>
fudgey