Bootstrap 4 - how to colspan and rowspan

Question

I have this bootstrap 4 table which behaves not as I expect

Or maybe I have misinterpreted the meaning of bootstrap 4 tables tags

Can you kindly hint what is wrong?

here it is the fiddle https://jsfiddle.net/1uokLh67/11/

e.g. as you can see, they Pay To and Customer cells are not spanning 50% each one but there is some empty space at the end and you'll see others behaviors

Thank you

  <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

use colspan to resolve your problem...

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