引导4-如何跨越和行跨度

Question

我有这个引导4表，它的行为与我预期的不一样。

或者我误解了引导4表标签的含义。

你能告诉我出什么事了吗？

这里是小提琴https://jsfiddle.net/1uokLh67/11/

如你所见，他们支付给和客户单元并不是每一个都跨越50%，但是在最后有一些空空间，你会看到其他的行为

谢谢

​

  <div class="container">
    <table class="table table-bordered">
    	 <caption>A complex table</caption>
       
       
    		 <thead>
    				<tr>
    					<th class="col-4">Invoice #123456789</th>
    					<th class="col-2">Date:</th>
    					<th class="col-6">14 January 2025</th>
    				</tr>
    			  <tr>
    			   <td class="col-6">
    			    <strong>Pay to:</strong><br>
    			    Acme Billing Co.<br>
    			    123 Main St.<br>
    			    Cityville, NA 12345
    			   </td>
    			   <td class="col-6">
    			    <strong>Customer:</strong><br>
    			    John Smith<br>
    			    321 Willow Way<br>
    			    Southeast Northwestershire, MA 54321
    			   </td>
    			  </tr>
    		 </thead>
         
         
    		 <tbody>
    			  <tr>
              <th class="col-3">Qty.</th>			  	
              <th class="col-3">Name / Description</th>
              <th class="col-3">Price</th>
              <th class="col-3">Cost</th>
    			  </tr>
    			  <tr>
                <td class="col-3">1000</td>
                <td class="col-3">Paperclips</td>			   
                <td class="col-3">0.01</td>
                <td class="col-3">10.00</td>
    			  </tr>
    			  <tr>
    			   <td class="col-3">100</td>			  	
    			   <td class="col-3">Staples (box)</td>
    			   <td class="col-3">1.00</td>
    			   <td class="col-3">100.00</td>
    			  </tr>
    		 </tbody>
    		 <tfoot>   
    			  <tr>
              <td  class="col-3"></td>
              <td class="col-3"></td>
              <th class="col-3">Subtotal</th>
              <td class="col-3"> 110.00</td>
    			  </tr>
    			  <tr>
              <td class="col-3"></td>
              <th class="col-3">Tax</th>
              <td class="col-3"> 8% </td>
              <td class="col-3">8.80</td>
    			  </tr>
    			  <tr>
              <td class="col-3"></td>
              <td class="col-3"></td>
              <th class="col-3">Grand Total</th>
              <td class="col-3">$ 118.80</td>
    			  </tr>
    		 </tfoot>
         
    		</table>
        </div>

​

Answer 1

用colspan解决你的问题.

​

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <table class="table table-bordered">
    <caption>A complex table</caption>
    <thead>
      <tr>
        <th class="col-4">Invoice #123456789</th>
        <th class="col-2">Date:</th>
        <th class="col-6" colspan="2">14 January 2025</th>
      </tr>
      <tr>
        <td class="col-6" colspan="1">
          <strong>Pay to:</strong>
          <br>
          Acme Billing Co.<br>
          123 Main St.<br>
          Cityville, NA 12345
        </td>
        <td class="col-6" colspan="3">
          <strong>Customer:</strong>
          <br>
          John Smith<br>
          321 Willow Way<br>
          Southeast Northwestershire, MA 54321
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="col-3">Qty.</th>
        <th class="col-3">Name / Description</th>
        <th class="col-3">Price</th>
        <th class="col-3">Cost</th>
      </tr>
      <tr>
        <td class="col-3">1000</td>
        <td class="col-3">Paperclips</td>
        <td class="col-3">0.01</td>
        <td class="col-3">10.00</td>
      </tr>
      <tr>
        <td class="col-3">100</td>
        <td class="col-3">Staples (box)</td>
        <td class="col-3">1.00</td>
        <td class="col-3">100.00</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td class="col-3"></td>
        <td class="col-3"></td>
        <th class="col-3">Subtotal</th>
        <td class="col-3"> 110.00</td>
      </tr>
      <tr>
        <td class="col-3"></td>
        <th class="col-3">Tax</th>
        <td class="col-3"> 8% </td>
        <td class="col-3">8.80</td>
      </tr>
      <tr>
        <td class="col-3"></td>
        <td class="col-3"></td>
        <th class="col-3">Grand Total</th>
        <td class="col-3">$ 118.80</td>
      </tr>
    </tfoot>
  </table>
</div>

​