HTML: Place table right aligned in other table cell

Question

I want a table inside of a td of another table to be aligned at the right side.

 <table style="width: 100%;"> <tr> <td style="text-align:right;"> <table style="width: 200px; table-layout: fixed; background-color:blue"> <tr> <td> <input style="width:100%" type="button" value="OK" /> </td> <td> <input style="width:100%" type="button" value="Abbrechen" /> </td> </tr> </table> </td> </tr> </table>

As you can see, the inner table is shown at the left side. How to accomplish?

Answer 1

Just add display: inline-table; to the inner table. Otherwise the text-align parameter won't apply, since it only applies to inline elements.

 <table style="width: 100%"> <tr> <td style="text-align:right;"> <table style="width: 200px; table-layout: fixed; background-color:blue; display: inline-table;"> <tr> <td> <input style="width:100%" type="button" value="OK" /> </td> <td> <input style="width:100%" type="button" value="Abbrechen" /> </td> </tr> </table> </td> </tr> </table>