Printing table cells from right to left

antonpuz picture antonpuz · Mar 8, 2013 · Viewed 18.9k times · Source

I make a table and want the first cell to start from right instead of from left as default. I tried changing the float attribute in CSS but it doesn't seem to help. Here is the code:

<table border="0" width="100%" cellspacing="0" align="center" class="result_table">
    <tr align="right">
    <th bgcolor="#cccccc" align="right">1</th>
    <th bgcolor="#cccccc" size="17">2</th>
    <th bgcolor="#cccccc">3</th>
    <th bgcolor="#cccccc">4</th>
    </tr>

</table>

<style>
    table.result_table {
        float:right;
    }
</style>

Can anyone suggest a way to change the float of this table?

Answer

Jukka K. Korpela picture Jukka K. Korpela · Mar 8, 2013

As suggested in comments, you can set directionality to right-to-left (RTL). However, unless your table content is in a right-to-left language, you should additionally set the directionality in table content elements to left-to-right. Otherwise, they inherit RTL directionality, which will cause surprises in many situations, since the directionality also sets the overall text directionality. This will not affect normal text in a Western language, but it will affect e.g. content like “4 (5)”, which would appear as “(5) 4” with RTL directionality.

Thus, you should set

table.result_table {
  direction: rtl; }
table.result_table caption, table.result_table th, table.result_table td {
  direction: ltr; }