Bootstrap 4 - 如何 colspan 和 rowspan

Question

我有这个 bootstrap 4 table，它的行为与我预期的不一样

或者我误解了 bootstrap 4 tables 标签的意思

你能指出哪里出了问题吗？

这里是fiddlehttps://jsfiddle.net/1uokLh67/11/

例如如您所见，它们 Pay To 和 Customer 单元格没有跨越每个单元格的 50%，但有一些空的 space结束，你会看到其他人的行为

谢谢

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

Bootstrap 4 - 如何 colspan 和 rowspan

Bootstrap 4 - how to colspan and rowspan

css-tables

bootstrap-4