How to right align last two columns of a table with CSS

Question

I'd like to right align the text of last two columns of a table.

<table>
  <tr>
    <th>H 1</th>
    <th>H 2</th>
    <th>H 3</th>
    <th>H 4</th>
  </tr>
  <tr>
    <td rowspan='3'>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

There is not the same number of columns in each row and I'm not sure how to use css:nth-child to select the last two td items in each row.

last-child selects the last, but not sure how to get the 2nd last child — Martlark, Nov 25 '13 at 01:31
possible duplicate of [align right in a table cell with CSS](http://stackoverflow.com/questions/1906469/align-right-in-a-table-cell-with-css) — Interrobang, Mar 02 '14 at 04:05

score 27 · Accepted Answer · answered Nov 25 '13 at 01:30

27

http://jsfiddle.net/BB9ty/

th:last-child,
td:last-child,
th:nth-last-child(2),
td:nth-last-child(2) {
    text-align: right;
}

answered Nov 25 '13 at 01:30

Mark Simpson

2,344
2
23
31

10

td:nth-last-child(-n+2) does it in one go. Thanks for the inspiration. – Martlark Nov 25 '13 at 01:33

How to right align last two columns of a table with CSS

1 Answers1