How to stretch row horizontally within a container using Boostrap 4? - html

Question

The second div showing the table headers is not stretching as much as the one above and they are all in a container-fluid.
I've tried d-flex, flex-grow-1, but I believe it stretches it vertically.
I took <div class="col"> off and the table occupies the container width wise, but then the last colun (right side) "disappears":
<div class="row" id="tableDiv">
<div class="col">
<div id="po-items" class="table-responsive">
<div class="card" id="card">
<table class="table table-hover table-vcenter" id="dtable">
<thead>
<tr>
<th style="width:7%">Prenda</th>
<th style="width:10%;">Cliente</th>
<div class="container-fluid" id="container2">
<div class="row d-flex flex-wrap align-items-center align-items-stretch">
<div class="col padding-0">
<div id="supplierTable" class="table-responsive">
<table class="table table-borderless" id="supplier">
<thead style="white-space: nowrap">
<tr>
<th class="text-center">Proveedor</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-0">
<select id="selectSupplier" name="select" required="required" class="custom-select" onchange="loadAddress('supplier', this);generatePoNumber('new', selectedSupplier(), '', selectedOrderPo());loadBuyersFromSS('','');loadItems('','','supplier','new','Corte')">
<option value=""></option>
<option value="artico"></option>
<option value="misura"></option>
</select>
</td>
</tr>
<tr>
<td class="address"><br></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col padding-0">
<div id="buyerTable" class="table-responsive">
<table class="table table-borderless" id="buyer">
<thead style="white-space: nowrap">
<tr>
<th class="text-center">Comprador</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-0">
<select id="selectBuyer" name="select" required="required" class="custom-select" onchange="loadAddress('buyer', this)">
<option value=""></option>
</select>
</td>
</tr>
<tr>
<td class="address"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col padding-0">
<div id="billToTable" class="table-responsive">
<table class="table table-borderless" id="billTo">
<thead style="white-space: nowrap">
<tr>
<th class="text-center">Facturar</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-0">
<select id="selectBillTo" name="select" required="required" class="custom-select" onchange="loadAddress('billTo', this)">
<option value=""></option>
</select>
</td>
</tr>
<tr>
<td class="address"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row" id="tableDiv">
<div class="col">
<div id="po-items" class="table-responsive">
<div class="card" id="card">
<table class="table table-hover table-vcenter" id="dtable">
<thead>
<tr>
<th style="width:7%">Prenda</th>
<th style="width:10%;">Cliente</th>
<th style="width:14%">Referencia</th>
<th style="width:14%">Tela</th>
<th style="width:10%">Color</th>
<th style="width:4%">OS</th>
<th style="width:4%">XS</th>
<th style="width:4%">S</th>
<th style="width:4%">M</th>
<th style="width:4%">L</th>
<th style="width:4%">XL</th>
<th style="width:4%">2XL</th>
<th style="width:4%">3XL</th>
<th style="width:5%">Total</th>
<th style="width:5%">Precio sin IVA</th>
<th style="width:5%">Precio Total sin IVA</th>
<th style="width:3%">Sel.</th>
</tr>
</thead>
<tbody id="tableRows">

Answer 1

Have you tried placing the second div="col" within a div="row" ?