Print table cells from right to left

Question

I am making a table and want the first cell to start on the right and not the left, as by 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> table.result_table { float:right; } 

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

Answer 1

As indicated in the comments, you can set the focus from right to left (RTL). However, if the contents of your table are not in the language from right to left, you must additionally set the orientation in the elements of the contents of the table from left to right. Otherwise, they inherit RTL directivity, which will come as a surprise in many situations, as directivity also sets the overall focus of the text. This will not affect the normal text in the western language, but it will affect, for example, "4 (5)", which will look like "(5) 4" with an orientation of RTL.

So you have to set

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

Answer 2

I am not sure that this can be achieved only with CSS. If using jQuery is good for you, here is a starting idea that might produce the desired result:

CSS

 .result_table{float:left; width:100%; border-collapse:collapse; padding:0;} .result_table th{float:right; padding:0;} 

JS:

 var cols = $('.result_table th').length; var colWidth = 100 / cols; $('.result_table th').css({width:colWidth+'%'}) 

Example - jsFiddle

Answer 3

There is a much simpler way. You can add direction="rtl" to the table.

 <table dir="rtl"> ... </table>