If I put , it decreases the table width and since there is a lot of columns, each cm matters.
If I set it to , although I apply #" >
Here is the piece of html where this is located:
<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</script>
</head>
<div id="tableDiv">
<div >
<div id="po-items" >
<div id="card">
<table id="dtable">
<thead>
<tr>
<th style="width:18%">Tela</th>
<th style="width:2%; display:none">Name</th>
<th style="width:15%">Color</th>
<th style="width:10%">Pantone</th>
<th style="width:15%">Contenido</th>
<th style="width:2%; display:none">Construction</th>
<th style="width:7%">Acho (m)</th>
<th style="width:5%">Peso (gsm)</th>
<th style="width:7%">Precio/m (USD)</th>
<th style="width:8%">Metros (m)</th>
<th style="width:10%">Precio Total sin IVA (COP)</th>
<th style="width:5%">Sel.</th>
</tr>
</thead>
<tbody id="tableRows">
<tr>
<td><input type="text" name="tableInputs" value="19677 D.Moss"></td>
<td style="display:none">R</td>
<td><input type="text" name="tableInputs" value="Black"></td>
<td><input type="text" name="tableInputs" value=""></td>
<td><input type="text" name="tableInputs" value="79 recycled poly / 21 span"></td>
<td style="display:none"></td>
<td><input type="text" name="tableInputs" value="1.27"></td>
<td><input type="number" min="0" name="numberInputs" value="235"></td>
<td><input type="number" step="0.01" min="0" name="numberInputs" value="6.61636045" onchange="add_to_total(this)"></td>
<td><input type="number" min="0" name="numberInputs" value="406" onchange="add_to_total(this)"></td>
<td >$2,686.24</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="text" name="tableInputs" value="19677 D.Moss"></td>
<td style="display:none">R</td>
<td><input type="text" name="tableInputs" value="Iron Gate"></td>
<td><input type="text" name="tableInputs" value=""></td>
<td><input type="text" name="tableInputs" value="79 recycled poly / 21 span"></td>
<td style="display:none"></td>
<td><input type="text" name="tableInputs" value="1.27"></td>
<td><input type="number" min="0" name="numberInputs" value="235"></td>
<td><input type="number" step="0.01" min="0" name="numberInputs" value="6.61636045" onchange="add_to_total(this)"></td>
<td><input type="number" min="0" name="numberInputs" value="265" onchange="add_to_total(this)"></td>
<td >$1,753.34</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="text" name="tableInputs" value="15094 D.Moss"></td>
<td style="display:none">L</td>
<td><input type="text" name="tableInputs" value="Wine"></td>
<td><input type="text" name="tableInputs" value=""></td>
<td><input type="text" name="tableInputs" value="79 poly / 21 span"></td>
<td style="display:none"></td>
<td><input type="text" name="tableInputs" value="1.27"></td>
<td><input type="number" min="0" name="numberInputs" value="235"></td>
<td><input type="number" step="0.01" min="0" name="numberInputs" value="6.28827647" onchange="add_to_total(this)"></td>
<td><input type="number" min="0" name="numberInputs" value="127Add YldAdd Yld" onchange="add_to_total(this)"></td>
<td ><strong>$0.00</strong></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td id="totalTitle" colspan="0" align="right"><strong>Total:</strong></td>
<td id="totalValue" >$4,439.58</td>
</tr>
</tfoot>
</table>
<div ><label for="notes">Notas:</label><textarea id="notes" name="notes" rows="4" cols="50"></textarea></div><br>
<div ><span >Recibido por:</span><span ></span></div>
</div>
</div>
</div>
</div>How can I achieve that?
Thanks!
CodePudding user response：
Putting everything in a container-fluid seems to be working and following the correct order of bootstraps grid system is important.
<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</script>
</head>
<div >
<div >
<div id="tableDiv">
<div >
<div id="po-items" >
<div id="card">
<table id="dtable">
<thead>
<tr>
<th style="width:18%">Tela</th>
<th style="width:2%; display:none">Name</th>
<th style="width:15%">Color</th>
<th style="width:10%">Pantone</th>
<th style="width:15%">Contenido</th>
<th style="width:2%; display:none">Construction</th>
<th style="width:7%">Acho (m)</th>
<th style="width:5%">Peso (gsm)</th>
<th style="width:7%">Precio/m (USD)</th>
<th style="width:8%">Metros (m)</th>
<th style="width:10%">Precio Total sin IVA (COP)</th>
<th style="width:5%">Sel.</th>
</tr>
</thead>
<tbody id="tableRows">
<tr>
<td><input type="text" name="tableInputs" value="19677 D.Moss"></td>
<td style="display:none">R</td>
<td><input type="text" name="tableInputs" value="Black"></td>
<td><input type="text" name="tableInputs" value=""></td>
<td><input type="text" name="tableInputs" value="79 recycled poly / 21 span"></td>
<td style="display:none"></td>
<td><input type="text" name="tableInputs" value="1.27"></td>
<td><input type="number" min="0" name="numberInputs" value="235"></td>
<td><input type="number" step="0.01" min="0" name="numberInputs" value="6.61636045" onchange="add_to_total(this)"></td>
<td><input type="number" min="0" name="numberInputs" value="406" onchange="add_to_total(this)"></td>
<td >$2,686.24</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="text" name="tableInputs" value="19677 D.Moss"></td>
<td style="display:none">R</td>
<td><input type="text" name="tableInputs" value="Iron Gate"></td>
<td><input type="text" name="tableInputs" value=""></td>
<td><input type="text" name="tableInputs" value="79 recycled poly / 21 span"></td>
<td style="display:none"></td>
<td><input type="text" name="tableInputs" value="1.27"></td>
<td><input type="number" min="0" name="numberInputs" value="235"></td>
<td><input type="number" step="0.01" min="0" name="numberInputs" value="6.61636045" onchange="add_to_total(this)"></td>
<td><input type="number" min="0" name="numberInputs" value="265" onchange="add_to_total(this)"></td>
<td >$1,753.34</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="text" name="tableInputs" value="15094 D.Moss"></td>
<td style="display:none">L</td>
<td><input type="text" name="tableInputs" value="Wine"></td>
<td><input type="text" name="tableInputs" value=""></td>
<td><input type="text" name="tableInputs" value="79 poly / 21 span"></td>
<td style="display:none"></td>
<td><input type="text" name="tableInputs" value="1.27"></td>
<td><input type="number" min="0" name="numberInputs" value="235"></td>
<td><input type="number" step="0.01" min="0" name="numberInputs" value="6.28827647" onchange="add_to_total(this)"></td>
<td><input type="number" min="0" name="numberInputs" value="127Add YldAdd Yld" onchange="add_to_total(this)"></td>
<td ><strong>$0.00</strong></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td id="totalTitle" colspan="0" align="right"><strong>Total:</strong></td>
<td id="totalValue" >$4,439.58</td>
</tr>
</tfoot>
</table>
<div ><label for="notes">Notas:</label><textarea id="notes" name="notes" rows="4" cols="50"></textarea></div><br>
<div ><span >Recibido por:</span><span ></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div >
</div>CodePudding user response：
Here you go...
Add the following CSS:
#dtable {
width: 100vw !important;
}
Let me know if this solves your problem.
See the snippet below.
#dtable {
width: 100vw !important;
}<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div id="tableDiv">
<div >
<div id="po-items" >
<div id="card">
<table id="dtable">
<thead>
<tr>
<th style="width:18%">Tela</th>
<th style="width:2%; display:none">Name</th>
<th style="width:15%">Color</th>
<th style="width:10%">Pantone</th>
<th style="width:15%">Contenido</th>
<th style="width:2%; display:none">Construction</th>
<th style="width:7%">Acho (m)</th>
<th style="width:5%">Peso (gsm)</th>
<th style="width:7%">Precio/m (USD)</th>
<th style="width:8%">Metros (m)</th>
<th style="width:10%">Precio Total sin IVA (COP)</th>
<th style="width:5%">Sel.</th>
</tr>
</thead>
<tbody id="tableRows">
<tr>
<td><input type="text" name="tableInputs" value="19677 D.Moss"></td>
<td style="display:none">R</td>
<td><input type="text" name="tableInputs" value="Black"></td>
<td><input type="text" name="tableInputs" value=""></td>
<td><input type="text" name="tableInputs" value="79 recycled poly / 21 span"></td>
<td style="display:none"></td>
<td><input type="text" name="tableInputs" value="1.27"></td>
<td><input type="number" min="0" name="numberInputs" value="235"></td>
<td><input type="number" step="0.01" min="0" name="numberInputs" value="6.61636045" onchange="add_to_total(this)"></td>
<td><input type="number" min="0" name="numberInputs" value="406" onchange="add_to_total(this)"></td>
<td >$2,686.24</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="text" name="tableInputs" value="19677 D.Moss"></td>
<td style="display:none">R</td>
<td><input type="text" name="tableInputs" value="Iron Gate"></td>
<td><input type="text" name="tableInputs" value=""></td>
<td><input type="text" name="tableInputs" value="79 recycled poly / 21 span"></td>
<td style="display:none"></td>
<td><input type="text" name="tableInputs" value="1.27"></td>
<td><input type="number" min="0" name="numberInputs" value="235"></td>
<td><input type="number" step="0.01" min="0" name="numberInputs" value="6.61636045" onchange="add_to_total(this)"></td>
<td><input type="number" min="0" name="numberInputs" value="265" onchange="add_to_total(this)"></td>
<td >$1,753.34</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="text" name="tableInputs" value="15094 D.Moss"></td>
<td style="display:none">L</td>
<td><input type="text" name="tableInputs" value="Wine"></td>
<td><input type="text" name="tableInputs" value=""></td>
<td><input type="text" name="tableInputs" value="79 poly / 21 span"></td>
<td style="display:none"></td>
<td><input type="text" name="tableInputs" value="1.27"></td>
<td><input type="number" min="0" name="numberInputs" value="235"></td>
<td><input type="number" step="0.01" min="0" name="numberInputs" value="6.28827647" onchange="add_to_total(this)"></td>
<td><input type="number" min="0" name="numberInputs" value="127Add YldAdd Yld" onchange="add_to_total(this)"></td>
<td ><strong>$0.00</strong></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td id="totalTitle" colspan="0" align="right"><strong>Total:</strong></td>
<td id="totalValue" >$4,439.58</td>
</tr>
</tfoot>
</table>
<div ><label for="notes">Notas:</label><textarea id="notes" name="notes" rows="4" cols="50"></textarea></div><br>
<div ><span >Recibido por:</span><span ></span></div>
</div>
</div>
</div>
</div>