How to Set the Size of a Column in a Bootstrap Responsive Table

How to set the size of a column in a Bootstrap responsive table

Bootstrap 4.0

Be aware of all migration changes from Bootstrap 3 to 4. On the table you now need to enable flex box by adding the class d-flex, and drop the xs to allow bootstrap to automatically detect the viewport.

<div class="container-fluid">
    <table id="productSizes" class="table">
        <thead>
            <tr class="d-flex">
                <th class="col-1">Size</th>
                <th class="col-3">Bust</th>
                <th class="col-3">Waist</th>
                <th class="col-5">Hips</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-1">6</td>
                <td class="col-3">79 - 81</td>
                <td class="col-3">61 - 63</td>
                <td class="col-5">89 - 91</td>
            </tr>
            <tr class="d-flex">
                <td class="col-1">8</td>
                <td class="col-3">84 - 86</td>
                <td class="col-3">66 - 68</td>
                <td class="col-5">94 - 96</td>
            </tr>
        </tbody>
    </table>

bootply

Bootstrap 3.2

Table column width use the same layout as grids do; using col-[viewport]-[size]. Remember the column sizes should total 12; 1 + 3 + 3 + 5 = 12 in this example.

        <thead>
            <tr>
                <th class="col-xs-1">Size</th>
                <th class="col-xs-3">Bust</th>
                <th class="col-xs-3">Waist</th>
                <th class="col-xs-5">Hips</th>
            </tr>
        </thead>

Remember to set the <th> elements rather than the <td> elements so it sets the whole column. Here is a working BOOTPLY.

Thanks to @Dan for reminding me to always work mobile view (col-xs-*) first.

Bootstrap 4 responsive table: How to fix column width and make table always take up 100 % width of parent element?

I now managed to find a solution that suits at least my needs:

<div class="table-responsive">
  <table class="w-auto mw-100">
    ...table elements...
  </table>
</div>

The classes .table-responsive and .w-auto are Bootstrap standard, whereas .mw-100 has been added by me:

.mw-100 {
  min-width:100%;
}

I don't know if this is the "right way" to deal with the issues mentioned in my opening post but at least for me it works fine.

How to set up fixed width for td?

For Bootstrap 4.0:

In Bootstrap 4.0.0 you cannot use the col-* classes reliably (works in Firefox, but not in Chrome).
You need to use OhadR's answer:

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width:  8.33%">Col 5</th>
</tr>

For Bootstrap 3.0:

With twitter bootstrap 3 use: class="col-md-*" where * is a number of columns of width.

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

For Bootstrap 2.0:

With twitter bootstrap 2 use: class="span*" where * is a number of columns of width.

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

** If you have <th> elements set the width there and not on the <td> elements.

Making a Bootstrap table column fit to content

Make a class that will fit table cell width to content

.table td.fit, 
.table th.fit {
    white-space: nowrap;
    width: 1%;
}

Bootstrap 4 equal column widths with responsive table

Actually, I solved this one. All I had to do was:

.table-product [class^="col-"] {
    flex-shrink: 1;
}

Bootstrap 4 responsive table width per column to have specific width

Those class do not exist in bootstrap, you only have them for 25%,50%,75% and 100%. you need to create them:

.w-20 {
  width: 20%;
}

.w-10 {
  width: 10%
}

.w-40 {
  width: 40%;
}

table {
  table-layout:fixed;/* will switch the table-layout algorythm */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <table class="table table-bordered">
    <thead>
      <tr class="m-0">
        <th class="w-20">a</th>
        <th class="w-10">b</th>
        <th class="w-20">c</th>
        <th class="w-40">d</th>
        <th class="w-10">e</th>
      </tr>
    </thead>
    <tbody>
      <tr class="m-0">
        <th class="w-20">a. Width with 20</th>
        <th class="w-10">b. Smaller width column</th>
        <th class="w-20">c. Should be small but I'm adding the maximum text here just to test if w-20 is working.</th>
        <th class="w-40">d. Biggest width but not working!</th>
        <th class="w-10">e. Another small column</th>
      </tr>
    </tbody>

  </table>
</div>

@media 
only screen and (max-width: 767px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    .table-responsive > .table > tbody > tr > td {
        white-space: inherit;
        min-width:200px;
    }
 }

table td[class*=col-], table th[class*=col-] {
    position: static;
    display: table-cell;
    float: none;
}

<thead>
     <tr>
           <th class="w-25">25</th>
           <th class="w-50">50</th>
           <th class="w-25">25</th>
     </tr>
</thead>

<table class="table table-bordered">
        <thead>
            <tr class="d-flex">
                <th class="col-3">25%</th>
                <th class="col-3">25%</th>
                <th class="col-6">50%</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-sm-3">..</td>
                <td class="col-sm-3">..</td>
                <td class="col-sm-6">..</td>
            </tr>
        </tbody>
    </table>