我有用HTML设计的这张桌子。我没有向该表添加任何引导主题元素,并且它的宽度不是固定的。如您所见,客户名称的td仅具有一个跨度,而描述td具有4个跨度。但是这种一致并不是我所期望的。这是我试图实现的目标:

html - 在HTML表格中添加`colspan`会破坏结构-LMLPHP

这是我得到的:

html - 在HTML表格中添加`colspan`会破坏结构-LMLPHP

有人可以帮我解决这个问题吗?提前致谢。



.table-border {
  border: 1px solid #000000;
}
.table-bold-text {
  font-size: 12px;
  font-weight: 900;
}
.table-text {
  font-size: 12px;
}
#tripInvoice table tr td {
  padding: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="tripInvoice">
  <table class="">
    <tr style="border-bottom: 2px solid black;">
      <td colspan="3">
        <img src="http://placehold.it/129x97" alt="" />
      </td>
      <td colspan="4" style="text-align: right; font-size: 26px; font-weight: 900;">TAX INVOICE</td>
    </tr>
    <tr>
      <td colspan="3" class="table-bold-text">Mirissa Water Sports (Pvt) Ltd</td>
      <td colspan="4"></td>
    </tr>
    <tr>
      <td colspan="3" class="table-bold-text">"Senasuma", Mirissa - South, Mirissa.</td>
      <td colspan="2"></td>
      <td class="table-bold-text">Inv.No:</td>
      <td class="table-bold-text">MWS/15/1545</td>
    </tr>
    <tr>
      <td colspan="3" class="table-bold-text">Contact: +94 77 359 77 32</td>
      <td colspan="2"></td>
      <td class="table-bold-text">Date:</td>
      <td class="table-bold-text">2015.05.26</td>
    </tr>
    <tr>
      <td colspan="5"></td>
      <td class="table-bold-text">Vat No.:</td>
      <td class="table-bold-text">114690244-7000</td>
    </tr>
    <tr>
      <td class="table-bold-text">Customer Name:</td>
      <td colspan="4" class="table-bold-text table-border">Jetwing Travels (Pvt) Ltd</td>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="7">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="4" class="table-border table-bold-text" style="border-bottom: none;">46/26, Jetwing House,</td>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="4" class="table-border table-bold-text" style="border-top: none; border-bottom: none;">Nawam Mawatha,</td>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="4" class="table-border table-bold-text" style="border-top: none;">Colombo 02</td>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr style="background: #d9d9d9; text-align: center;">
      <td colspan="4" class="table-border table-bold-text">DESCRIPTION</td>
      <td class="table-border table-bold-text">QTY (# Pax)</td>
      <td class="table-border table-bold-text">UNIT PRICE</td>
      <td class="table-border table-bold-text">TOTAL</td>
    </tr>
    <tr>
      <td colspan="4" class="table-border">Whales & Dolphin watching on 25th May 2015 Tour No - 2015-5346</td>
      <td class="table-border">12</td>
      <td class="table-border">Rs.4,416.18</td>
      <td class="table-border">Rs.52,994.16</td>
    </tr>
    <tr>
      <td colspan="6" class="table-border">Discount</td>
      <td class="table-border"></td>
    </tr>
    <tr>
      <td colspan="6" class="table-border"></td>
      <td class="table-border">Rs.52,994.16</td>
    </tr>
    <tr>
      <td colspan="6" class="table-border">NBT 2%</td>
      <td class="table-border">Rs.1,059.88</td>
    </tr>
    <tr>
      <td colspan="6" class="table-border"></td>
      <td class="table-border">Rs.54,054.04</td>
    </tr>
    <tr>
      <td colspan="6" class="table-border">VAT 11%</td>
      <td class="table-border">Rs.5,945.94</td>
    </tr>
    <tr>
      <td colspan="6" class="table-border">Total Amount</td>
      <td class="table-border">Rs.60,000.00</td>
    </tr>
    <tr>
      <td colspan="7">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="7" class="table-bold-text">All Cheques to be drawn in favour of MIRISSA WATER SPORTS</td>
    </tr>
    <tr>
      <td colspan="7">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="7" class="table-bold-text">Account Details:</td>
    </tr>
    <tr>
      <td colspan="7" class="table-bold-text">Mirissa Water Sports (Pvt) Ltd</td>
    </tr>
    <tr>
      <td colspan="7" class="table-bold-text">Acc. No: 213010002896</td>
    </tr>
    <tr>
      <td colspan="7" class="table-bold-text">Swift Code: HNBSLKLX</td>
    </tr>
    <tr>
      <td colspan="7" class="table-bold-text">Bank Code : 7083</td>
    </tr>
    <tr>
      <td colspan="7" class="table-bold-text">Hatton National Bank PLC</td>
    </tr>
    <tr>
      <td colspan="7" class="table-bold-text">Weligama</td>
    </tr>
    <tr>
      <td colspan="7">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="7" class="table-bold-text" style="text-align: center; font-style: italic;">** This is a computer generated document. No signature is required.</td>
    </tr>
  </table>
</div>





fiddle

最佳答案

这是您的问题:

<tr>
  <td class="table-bold-text">Customer Name:</td>
  <td colspan="4" class="table-bold-text table-border">Jetwing Travels (Pvt) Ltd</td>
  <td colspan="2">&nbsp;</td>
</tr>


在第二个td中,您将合并四列。而是删除colspan属性:

<tr>
  <td class="table-bold-text">Customer Name:</td>
  <td class="table-bold-text table-border">Jetwing Travels (Pvt) Ltd</td>
  <td colspan="2">&nbsp;</td>
</tr>


演示:http://jsfiddle.net/fhsjjkha/1

这是您原始布局的清晰视图,因此您可以看到每个表格单元格在做什么:

演示:http://jsfiddle.net/fhsjjkha/2/

10-05 20:39
查看更多