将`colspan`添加到html表会破坏结构

Question

我有这个用HTML设计的表。我没有在这个表中添加任何bootstrap主题元素，它不是固定的宽度。如下所示，td客户名称只有一个跨度，而描述td有4个跨度。但是调整并不是我所期望的。这是我试图实现的目标：

这就是我得到的：

任何人都可以帮我解决这个问题吗？提前谢谢。

.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

Answer 1

这是你的问题：

<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>

DEMO：http://jsfiddle.net/fhsjjkha/1

在这里，您可以清楚地了解原始布局，以便了解每个表格单元格的作用：

DEMO：http://jsfiddle.net/fhsjjkha/2/