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

好的，我就是这样做的。我合并了第一个和第二个表。边框有助于可视化，以后可以删除。

我还删除了所有内联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>

Answer 2

我在你的代码中看到一个表，但你在谈论三个表。如果有不同的单独它们并将它们放在不同的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％，请使用您希望表格的宽度。

表格对齐和不同的列宽

2 个答案: