Bootstrap 4-colspanとrowspanの方法
私はこれを持っていますbootstrap 4テーブルは期待どおりに動作しません
または、bootstrap 4つのテーブルタグの意味を誤って解釈している可能性があります。
何が悪いのか親切に教えてくれませんか？
ここがフィドルです https://jsfiddle.net/1uokLh67/11/
例えばご覧のとおり、Pay ToおよびCustomerセルはスパンしていませんそれぞれ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>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>