テーブルの配置とその幅が異なる

Question

ミドルテーブルを上下の幅に揃えたい。さらに、商品の説明欄の幅をトップテーブルの最初の欄の幅と同じにして残りの欄を幅の左側に調整したいとします。カラム "per"の幅は、 "Sl.No"の幅よりわずかに大きい場合があります。カラム。その他の列の幅はすべて同じです。ここでは、スクリーンショットを添付して：

<table style="margin:0;padding:0" > 
 
          <tr> 
 
           <td style="width:5%;">Sl No.</td> 
 
           <td style="padding:5px; text-align: center; " > Description of Goods </td> 
 
           <td style="padding:5px; text-align: center; "> HSN/SAC</td> 
 
           <td style="padding:5px; text-align: center; "> Quantity</td> 
 
           <td style="padding:5px; text-align: center; "> Rate</td> 
 
           <td style="padding:5px; text-align: center; "> per</td> 
 
           <td style="padding:5px; text-align: center;"> Amount</td> 
 
          </tr> 
 
          <tr> 
 
           <td style="width:7%; border-bottom:none;padding:5px 5px 0px 5px;">1</td> 
 
           <td style="text-align:left; border-bottom:none;padding:5px 5px 0px 5px;"><b>'.$CompanyData->device_model.' </b></td> 
 
           <td style="text-align:left; border-bottom:none;padding:5px 5px 0px 5px;"><b> </b></td> 
 
           <td style="width:12%;border-bottom:none;padding:5px 5px 0px 5px;"><b>'.$CompanyData->no_of_device_rent.' PCS</b></td> 
 
           <td style="width:12%;border-bottom:none;padding:5px 5px 0px 5px;"><b>'.number_format($CompanyData->unit_price,2).'</b></td> 
 
           <td style="width:6%;border-bottom:none;padding:5px 5px 0px 5px;"> PCS </td> 
 
           <td style="width:16%;border-bottom:none;padding:5px 5px 0px 5px;text-align:right;"><b> '.number_format($CompanyData->rent_amount,2).' </b></td> 
 
          </tr> 
 
          <tr> 
 
           <td style="width:7%;border-bottom:none;padding: 0px 5px 0px 5px; "></td> 
 
           <td style="text-align:left; border-bottom:none;padding: 0px 5px 0px 5px; "><i> '.$vehicle_details.'</i></td> 
 
           <td class="mono" style="width:12%;border-bottom:none;padding: 0px 5px 0px 5px; "></td> 
 
           <td style="width:12%;border-bottom:none;padding: 0px 5px 0px 5px; " class="mono"></td> 
 
           <td style="width:6%;border-bottom:none;padding: 0px 5px 0px 5px; " class="mono"></td> 
 
           <td style="width:16%;border-bottom:none;padding: 0px 5px 0px 5px; " class="mono"></td> 
 
          </tr> 
 
          <tr> 
 
           <td style="width:7%; height:170px;vertical-align:top;padding: 0px 5px 5px; "></td> 
 
           <td style="padding:5px; text-align: right; padding-right: 2px; font-weight: bold; height:170px;vertical-align:top;padding: 0px 5px 5px; "> 
 
            <i>'.$taxname.' @ 5%<br/> 
 
           '.$name_roundoff.' <br/> 
 
           Not Eligible for Input Tax Credit</i></td> 
 
           <td class="mono" style="width:12%; height:170px;vertical-align:top;padding: 0px 5px 5px; "></td> 
 
           <td class="mono" style="width:12%; height:170px;vertical-align:top;padding: 0px 5px 5px; "></td> 
 
           <td style="width:12%; height:170px;vertical-align:top;text-align:right;padding: 0px 5px 5px; "><b>5<br/> 
 
           <br/> 
 
           </b></td> 
 
           <td style="width:6%; height:170px;vertical-align:top;text-align:left;padding: 0px 5px 5px; " class="mono"><b>%<br/> 
 
           <br/> 
 
           </b></td> 
 
           <td style="width:16%; height:170px;vertical-align:top;padding: 0px 5px 5px; text-align:right;" ><b>'.number_format($CompanyData->service_tax,2).'<br/> 
 
           '.$CompanyData->round_off.' <br/> 
 
           </b></td> 
 
          </tr> 
 
          <tr> 
 
           <td style="width:7%;padding:0;"></td> 
 
           <td style="padding:5px; text-align: right; padding-right: 2px; font-weight: bold;padding:0;"> Total </td> 
 
           <td style="padding:5px; text-align: right; padding-right: 2px; font-weight: bold;padding:0;"> </td> 
 
           <td style="width:12%;padding:0;"><b>'.$CompanyData->no_of_device_rent.' PCS</b></td> 
 
           <td style="width:12%;padding:0;"></td> 
 
           <td style="width:6%;padding:0;"><b style="font-size:14px;"></b></td> 
 
           <td style="width:16%;padding:0 5px 0 0;text-align:right;"><b style="font-size:14px;">Rs '.number_format($final_amount,2).'</b></td> 
 
          </tr> 
 
          </table>

Answer 1

私はあなたの3つのテーブルについて話している、まだあなたのコード内で一つのテーブルを見ています。 異なるものがある場合は別々のdivに入れてください。それらに同じ幅を与えて、それらは等しくなるでしょう

<div> 
    <div> <table style="width: 60%;"> put contents of table 1 </table></div> 
    <div> <table style="width: 60%;"> put contents of table 2 </table></div> 
    <div> <table style="width: 60%;"> put contents of table 3 </table></div> 
</div> 

具体的には60％を使用しないでください、テーブルにする幅を使用してください。

Answer 2

[OK]を、これは私がそれを行うだろうかです。私は最初と2番目のテーブルをマージしました。ボーダーは視覚化するのに役立ち、後で削除することができます。

また、すべてのインラインCSSを削除しました。クラスで作業し、CSSルールを外部的に記述することを学ぶべきです。

td { 
 
    vertical-align: top; 
 
} 
 

 
.tod { 
 
    height: 100px; 
 
}

<table border="1px"> 
 
    <!-- 7 columns --> 
 
    <tr> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td>Despatched through</td> 
 
    <td colspan="5">Destination</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tod" colspan="7">Terms of delivery</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Sl No.</td> 
 
    <td> Description of Goods </td> 
 
    <td> HSN/SAC</td> 
 
    <td> Quantity</td> 
 
    <td> Rate</td> 
 
    <td> per</td> 
 
    <td> Amount</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td><b>'.$CompanyData->device_model.' </b></td> 
 
    <td><b> </b></td> 
 
    <td><b>'.$CompanyData->no_of_device_rent.' PCS</b></td> 
 
    <td><b>'.number_format($CompanyData->unit_price,2).'</b></td> 
 
    <td> PCS </td> 
 
    <td><b> '.number_format($CompanyData->rent_amount,2).' </b></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td><i> '.$vehicle_details.'</i></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td><i>Not Eligible for Input Tax Credit</i></td> 
 
    <td class="mono"></td> 
 
    <td class="mono"></td> 
 
    <td><b>5<br/><br/></b></td> 
 
    <td class="mono"><b>%<br/><br/></b></td> 
 
    <td><b>'.$CompanyData->round_off.' <br/></b></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td> Total </td> 
 
    <td> </td> 
 
    <td><b>'.$CompanyData->no_of_device_rent.' PCS</b></td> 
 
    <td></td> 
 
    <td><b></b></td> 
 
    <td>Rs '.number_format($final_amount,2).'</td> 
 
    </tr> 
 
</table>