Correct alignment and size of tables

Question

enter image description here

As you can see from my two tables, one is a different size to the other. My first question being, why is this? when I have set the width of the <th> in the top table to 100/300/100/100/100 (=700), and in the bottom table 500/100/100 (=700)

I would like to set the first column in the lower table to invisible, as I only want to see the summary and totals of the bottom table. Also I would like the aligned with the right hand side of the upper table. Any ideas or advice would be appreciated. Is it something to do with setting the border in the style?

If I try border-left for example I am allowed to add border-width, border-style, border-colour, inherit?

(Table 2)

 <table class="detailstable StartOnNewPage" align="center">
        <tr>          

                <th style="width:500px;"></th>  
                <th style="text-align:left; width:100px;">Summary</th>   
                <th style="text-align:right; width:100px;"></th>        
        </tr>
        <tr>                  
                <td style="width:500px;"></td>
                <td style="text-align:left; width:100px;">Labour</td>
                <th style="text-align:right; width:100px;"><%: this.FormatMoney(LabourTotal)%></th>
        </tr>
        <tr>              
                <td style="width:500px;"></td>
                <td style="text-align:left; width:100px; border-top:yes;">Plant</td>
                <th style="text-align:right; width:100px;"><%: this.FormatMoney(PlantTotal)%></th>                   
        </tr>
        <tr>
                <td style="width:500px;"></td>                     
                <th style="text-align:right; width:100px;"><%: this.DisplayPlantPercentage%></th>    
                <td style="text-align:right; width:100px;"><%: this.PlantToDisplayWithTwoDecimalPlaces%></td> 
        </tr>
         <tr>                 
                <td style="width:500px;"></td>
                <td style="text-align:left; width:100px;">Miscellaneous</td> 
                <th style="text-align:right; width:100px" class="FadeOutOnEdit"><%: this.FormatMoney(MiscellaneousItemsTotal) %></th>                 
         </tr>
         <tr>
                <td style="width:500px;"></td>                     
                <th style="text-align:right; width:100px;"><%: this.DisplayMiscellaneousPercentage%></th>    
                <td style="text-align:right; width:100px;"><%: this.MiscellaneousToDisplayWithTwoDecimalPlaces%></td> 
         </tr>
         <tr>   
                <td style="width:500px;"></td>
                <th style="text-align:left; width:100px;">TOTAL</th> 
                <th style="text-align:right; width:100px;"><%: this.FormatMoney(TotalOfAll)%></th>                 
        </tr>
        </table>

Now Looks like: enter image description here

You mean remove the width of each one and set the overall to 700px? please see my edit for the new image, the table is slightly to the right, I would like to align vertially straight to the first table — John
After implimenting Ravia's Answer. Try setting the outer div's width= 700 or something so that it will not move to the right. — syed mohsin

Ravi Vanapalli Ravi Vanapalli · Accepted Answer · 2013-05-08T09:14:13

For lower table remove the first column and use table attribute align as shown below

<table class="detailstable StartOnNewPage" align="right">
    <tr>          
    <th style="text-align:left; width:100px;">Summary</th>   
            <th style="text-align:right; width:100px;"></th>        
    </tr>
    <tr>                  
            <td style="text-align:left; width:100px;">Labour</td>
            <th style="text-align:right; width:100px;"><%: this.FormatMoney(LabourTotal)%></th>
    </tr>

....

Correct alignment and size of tables

1 Answers