Bootstrap 4 - comment colspan et rowpan
J'ai cette table bootstrap 4 qui ne se comporte pas comme prévu
Ou peut-être que j'ai mal interprété la signification de bootstrap 4 balises de tables
Pouvez-vous nous dire ce qui ne va pas?
ici c'est le violon https://jsfiddle.net/1uokLh67/11/
par exemple. comme vous pouvez le voir, les cellules Pay To et Customer ne s'étendent pas 50% chacun mais il y a un espace vide à la fin et vous verrez d'autres comportements
Je vous remercie
<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>utilisez colspan pour résoudre votre problème ...
<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>