Bootstrap table setting cell width problem

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.

try using table layout fixed and widths rathewr than max widths — Pete, Sep 03 '18 at 08:46
^have you tried @Pete's suggestion? possible duplicate of [this](https://stackoverflow.com/questions/15115052/bootstrap-how-to-set-up-fixed-width-for-td) — reiallenramos, Sep 03 '18 at 08:56
@reiallenramos, I'm so sorry, just realized that I tagged bootstrap 4, I use 3 in project — Mansur, Sep 03 '18 at 09:05
oh okay if that's the case you can't use width percentages with bootstrap. as suggested in the answer I linked earlier, you should use classes `A` — reiallenramos, Sep 03 '18 at 09:08
try this https://jsfiddle.net/reiallenramos/dr6c8f0s/5/ . Notice I removed `table-responsive`. Let me know if it works so I can post as answer. — reiallenramos, Sep 03 '18 at 09:17
@reiallenramos no, mate it doesn't work when there exists data which is too long. Field therefore the table expands and scrollbar shows up — Mansur, Sep 03 '18 at 09:21
updated with longer text: https://jsfiddle.net/reiallenramos/dr6c8f0s/9/ . Are you talking about the scrollbar on the page itself or in the table? — reiallenramos, Sep 03 '18 at 09:25
in my case that didn't work as well :/ but @cgdannie 's solution removed the scrollbar. Anyways, I'm gonna try something else. Thanks for the help, man — Mansur, Sep 03 '18 at 09:33

score 0 · Answer 1 · answered Sep 03 '18 at 08:44

0

you can code :

<div class="table-responsive">
  <table class="table">
...
 </table>
</div>

and style

.table-responsive {
    display: table;
}

answered Sep 03 '18 at 08:44

Quan Lee

146
4

Tried it but it just hides the scrollbar and the rest becomes not visible – Mansur Sep 03 '18 at 08:59
To
– Quan Lee Sep 03 '18 at 09:34

score 0 · Accepted Answer · answered Sep 03 '18 at 09:07

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>

Bootstrap table setting cell width problem

2 Answers2