Bootstrap table setting cell width problem - html

Question

I have the following issue with my bootstrap table. I cannot set a custom width to cells at table head. Even if I do, it's not set. I searched and learned that bootstrap does prevent that by adding padding to cells. But it still didn't work when I added padding:0 to each cell at table head. Anyways let me show the code and screenshots
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="table-responsive">
<table class="table table-hover table-white">
<thead>
<tr>
<th style="max-width: 1%;">#</th>
<th style="max-width: 48.5%;">Component</th>
<th style="max-width: 2.5%;">Unit Cost</th>
<th style="max-width: 2.5%;">Qty</th>
<th style="max-width: 2.5%;">Currency</th>
<th style="max-width: 13%;">WBS</th>
<th style="max-width: 14%;">Purchase Type</th>
<th style="max-width: 10%;">Vendor</th>
<th style="max-width: 2%;"></th>
<th style="max-width: 2%;"></th>
<th style="max-width: 2%;"></th>
</tr>
</thead>
</table>
</div>
</div>
It looks like this as you can see the width is not applied
However it should look like this without scrollbar.
So my questions are
How can I apply fixed width to those cells?
How can I make the table look 100% visible without that scrollbar. Somehow squeezing it
Thanks, beforehand. If anything else needs to be shared let me know, please.

Answer 1

You need to disable padding for all cells, not only the ones in the header.
If you do not want, that bigger content increases the column width, you should hide the overflow.
.table-responsive td,
.table-responsive th {
padding: 0 !important;
overflow: hidden;
}
If you want to resize the table to always fit into the screen, you would need some JavaScript.
(function() {
const responsiveTable = document.querySelector('.responsive-table table');
responsiveTable.style.transformOrigin = '0 0';
function resizeTable() {
responsiveTable.style.transform = 'scale(1)';
const tableWidth = responsiveTable.getBoundingClientRect().width;
const resizeFactor = document.body.offsetWidth / tableWidth;
responsiveTable.style.transform = `scale(${resizeFactor})`;
}
resizeTable();
window.addEventListener('resize', resizeTable);
})();
.responsive-table table {
background-color: red;
}
.responsive-table td,
.responsive-table th {
background-color: orange;
}
<div class="responsive-table">
<table>
<thead>
<tr>
<th style="width: 5%">Column 1</th>
<th style="width: 5%">Column 2</th>
<th style="width: 5%">Column 3</th>
<th style="width: 5%">Column 4</th>
<th style="width: 5%">Column 5</th>
<th style="width: 5%">Column 6</th>
<th style="width: 5%">Column 7</th>
<th style="width: 5%">Column 8</th>
<th style="width: 5%">Column 9</th>
<th style="width: 5%">Column 10</th>
<th style="width: 5%">Column 11</th>
<th style="width: 5%">Column 12</th>
<th style="width: 5%">Column 13</th>
<th style="width: 5%">Column 14</th>
<th style="width: 5%">Column 15</th>
<th style="width: 5%">Column 16</th>
<th style="width: 5%">Column 17</th>
<th style="width: 5%">Column 18</th>
<th style="width: 5%">Column 19</th>
<th style="width: 5%">Column 20</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
</tr>
<tr>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
</tr>
<tr>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
</tr>
</tbody>
</table>
</div>

Answer 2

you can code :
<div class="table-responsive">
<table class="table">
...
</table>
</div>
and style
.table-responsive {
display: table;
}