Bootstrap 4-如何colspan和rowspan

Question

我有这个引导程序4表，其行为不符合我的预期

或者我可能误解了Bootstrap 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>