Styling The Last Td in a Table with CSS

Styling the last td in a table with css

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.

How to select first and last TD in a row?

You could use the :first-child and :last-child pseudo-selectors:

tr td:first-child,
tr td:last-child {
    /* styles */
}

This should work in all major browsers, but IE7 has some problems when elements are added dynamically (and it won't work in IE6).

CSS: how to apply styles to the last td of a CSS class (not the last td of tr)

As folks here indicated, there is no pure-CSS solution for this. What I did is to simply add a new class ("last-column") to the last with the given class. Something like the following:

<tr>
    <td class="column-text">column 1</td>
    <td class="column-text">column 2</td>
    <td class="column-text">column 3</td>
    <td class="column-text last-column">column 4</td>
    <td>last column has no class</td>
</tr>

The above html is generated dynamically and I am able to know which one is the last td with "column-text". I feel this way is better than using Javascript.

Cheers.

Style for last td of last tr of certain class in table

W3C :last-child

The :last-child pseudo-class represents an element that is the last child of some other element.

:last-child will get the last element of its parent and then it will apply style if it has class .fose_table_row. So CSS can't solve your problem.

A possible jQuery solution:

$('table.fose_table').find('tr.fose_table_row').eq(-1).addClass('extra-style');

DEMO

Make last td as row

If you want the last column of each row to appear, and you're willing to include explicit styles on all of the other columns, you can float them:

td, th {  display: block;  float: left;
  /* for visibility only */  border: 1px solid grey;
  /* so we don't run out of space with 100% total width */  box-sizing: border-box;}
td:last-child, th:last-child {  width: 100%;}

<table>  <thead>    <tr>      <th colspan="1" style="width: 10%">TH1</th>      <th colspan="1" style="width: 60%">TH2</th>      <th colspan="1" style="width: 30%"> </th>      <th> </th>    </tr>  </thead>  <tr>    <td colspan="1" style="width: 10%">a</td>    <td colspan="1" style="width: 60%">b</td>    <td colspan="1" style="width: 30%">c</td>    <td>UNDERNEATH SPANNING WHOLE ROW</td>  </tr>  <tr>    <td colspan="1" style="width: 10%">a</td>    <td colspan="1" style="width: 60%">b</td>    <td colspan="1" style="width: 30%">c</td>    <td>UNDERNEATH SPANNING WHOLE ROW</td>  </tr></table>

CSS selector last row from main table

Your tables should have as immediate children just tbody and thead elements, with the rows within*. So, amend the HTML to be:

<table border="1" width="100%" id="test">
  <tbody>
    <tr>
     <td>
      <table border="1" width="100%">
        <tbody>
          <tr>
            <td>table 2</td>
          </tr>
        </tbody>
      </table>
     </td>
    </tr> 
    <tr><td>table 1</td></tr>
    <tr><td>table 1</td></tr>
    <tr><td>table 1</td></tr>
  </tbody>
</table>

Then amend your selector slightly to this:

#test > tbody > tr:last-child { background:#ff0000; }

See it in action here. That makes use of the child selector, which:

...separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first.

So, you are targeting only direct children of tbody elements that are themselves direct children of your #test table.

Alternative solution

The above is the neatest solution, as you don't need to over-ride any styles. The alternative would be to stick with your current set-up, and over-ride the background style for the inner table, like this:

#test tr:last-child { background:#ff0000; }
#test table tr:last-child { background:transparent; }

* It's not mandatory but most (all?) browsers will add these in, so it's best to make it explicit. As @BoltClock states in the comments:

...it's now set in stone in HTML5, so for a browser to be compliant it basically must behave this way.

HTML table last td to take remaining width

You can give the first td a small width, e.g. 1px, with white-space: nowrap;

table {  width: 100%;  border-collapse: collapse;}td {  border: 1px solid red;}td:first-child {  width: 1px;  white-space: nowrap;}

<table>  <tr>    <td>short content</td>    <td>long content</td>  </tr></table>

---

Related Topics