1

I need to align the table to right. I used float:right, but it is still not working. Is there any other option?

<table style="text-align:right; width:100%; float:right;">
  <td class="route-summary">
    <tr>
      <th>Drop No.</th>
      <th>Route Name/Destination</th>
    </tr>
  </td>
</table>

As you can see, both text-align:right and float:right are not working.

cssyphus
  • 37,875
  • 18
  • 96
  • 111
Jhom Francisco
  • 37
  • 9
  • Possible duplicate of [align right in a table cell with CSS](https://stackoverflow.com/questions/1906469/align-right-in-a-table-cell-with-css) – Abolfazl Panbehkar May 20 '19 at 02:54
  • Hi Jhom - following up again. Please remember to select your own answer (or any other answer) as "Best Answer" (by clicking the checkmark) to close out the question? That would help us out. *Thanks!* – cssyphus Jun 27 '19 at 12:36

4 Answers4

1

thanks for your info.. much appreciated. i was solve the problem. i just add margin-left and it was moved. :)

and this is the code.

<td>
<div style="text-align:right; margin-left:160px; width:100%;">                  
<table class="route-summary">
<tr>                             
<th>Drop No.</th>
<th>Route Name/Destination</th>
</tr>
Jhom Francisco
  • 37
  • 9
0

Hello I think if you want the table to be align, you should style the table not the td

Changed table width to show perfectly right align & right floating table

 <table class="route-summary"style="text-align:right; width:80%; float:right;">
   <tr>
    <th>Drop No.</th>
    <th>Route Name/Destination</th>
   </tr>
 </table>
indefinite
  • 383
  • 1
  • 5
  • 18
0

To align the entire table to the right, wrap it in a div, give the table a width, and use flexbox to align the items to the right:

.parentDiv{display:flex; justify-content: flex-end;}

DEMO 1

.flexparent{display:flex;justify-content:flex-end;}
table{width:60vw;border-collapse:collapse;}
th{border:1px solid red;}
td{border:1px solid green;}
<div class="flexparent">
  <table>
      <tr>
          <th>Drop No.</th>
          <th>Route Name/Destination</th>
      </tr>
      <tr>
          <td class="route-number">17</td>
          <td class="route-name">Paddington Station</td>
      <tr>
  </table>
</div>

To style the cell data to be right-aligned, use CSS on the th and td elements:

th, td{text-align:right;}

DEMO 2

table{width:60vw;border-collapse:collapse;border:1px solid red;}
th,td{text-align:right;}
th,td{border:1px solid green;}
<table>
  <tr>
    <th>Drop No.</th>
    <th>Route Name/Destination</th>
  </tr>
  <tr>
    <td class="route-number">17</td>
    <td class="route-name">Paddington Station</td>
  <tr>
</table>

Also note that <tr> elements wrap both <th> and <td> elements, separately. Neither <tr> nor <th> elements go inside <td> elements (although it is possible - but no longer good HTML - to insert an entire table into a <td> element). Basically, your table structure should look like this:

table
    tr
        th
        th
    /tr
    tr
        td
        td
    /tr
    tr
        td
        td
    /tr
    tr
        td
        td
    /tr
/table

REFERENCES:

Flexbox Cheatsheet

EXCELLENT Flexbox Tutorial (20 min)

The best 20 mins you will spend this year is learning flexbox. There is a reason why Bootstrap changed its main version number from Bootstrap3 to Bootstrap4 when they moved from Floats to Flexbox. And it's easy!

cssyphus
  • 37,875
  • 18
  • 96
  • 111
  • No worries Jhom - glad you solved it. Please do take my advice and watch the above video on flexbox. You will be very glad that you did. – cssyphus May 20 '19 at 14:28
0

Your table positioning on the right side. Here, you took the table width 100%, that's why it's taking the entire window's width and you couldn't figure out the exact alignment of your table. So I decreased the table width and gave a border so that you can visualize the alignment of the table. 

<table style="text-align:right; width:70%; float:right;border:1px solid black;">
      <td class="route-summary">
        <tr>
          <th>Drop No.</th>
          <th>Route Name/Destination</th>
        </tr>
      </td>
    </table>
Makdia Hussain
  • 744
  • 3
  • 11