html - 表格对齐方式和不同的列宽

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

我在您的代码中看到一张表，但您说的是三张表。如果有不同的将它们分开并放在不同的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%，使用您希望表格的宽度。