html - HTML 表格文本对齐方式

Question

<table>
   <tr><td>aaaaa</td></tr>
   <tr><td>aaaaaaaaaa</td></tr>
   <tr><td>aaa</td></tr> 
</table>

我希望第一行和第三行的文本右对齐而不是第二行，我该怎么做？

Answer 1

您可以使用您拥有的 HTML 并使用nth-child选择器

tr:nth-child(odd) {
text-align:right;
}

Answer 2

Very simple.

 <table>
       <tr style="text-align:right;"><td>aaaaa</td></tr>
       <tr><td>aaaaaaaaaa</td></tr>
       <tr style="text-align:right;><td>aaa</td></tr> 
    </table>

Or use classes:

<table>
           <tr class="tr-right"><td>aaaaa</td></tr>
           <tr><td>aaaaaaaaaa</td></tr>
           <tr class="tr-right"><td>aaa</td></tr> 
        </table>

And add to css:

.tr-right{text-align:right;}

Or as mentioned, you could use the css3 selector, but this doesn't work in all browsers.

tr:nth-child(odd) {
text-align:right;
}

Answer 3

<table>
    <thead></thead>
    <tbody>
        <tr class='right'><td>aaa</td></tr>
        <tr><td>aaa</td></tr>
        <tr class='right'><td>aaa</td></tr>
    </tbody>
</table>

.rigth{
 text-align:rigth;
}