Styling the last td in a table with css

Viewed 179097

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.

15 Answers

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.

you could use the last-child psuedo class

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

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

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.

$("td:last-child").css({border:"none"})

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");

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>

You can use the :last-of-type to catch last column of your table.

<style>
.table > tbody > tr > td:last-of-type {
    /* Give your style Here; */
}
</style>

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

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