How to specify responsive column width for table in Bootstrap v4

Question

In Bootstrap 3, I can easily design responsive sensitive table. I can split columns into their grid system. More than that I can hide some column for small devices. Here is my example. The table has 13 columns. The first two columns have 25% width each, the rest columns will share the rest 50% width.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<table class="table table-bordered">
<tr>
  <td class="col-xs-3">1</td>
  <td class="col-xs-3">2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
  <td>8</td>
  <td>9</td>
  <td>10</td>
  <td>11</td>
  <td>12</td>
  <td>13</td>
</tr>
</table>
</div>
</div>

Above code is not working in Bootstrap 4. You can see the column widths are not expected. I checked their release notes, it does not mention any breaking change of table layout.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<table class="table table-bordered">
<tr>
  <td class="col-3">1</td>
  <td class="col-3">2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
  <td>8</td>
  <td>9</td>
  <td>10</td>
  <td>11</td>
  <td>12</td>
  <td>13</td>
</tr>
</table>
</div>
</div>

Now if I add style="width:25%" for the first two columns, it will work. Now I want to figure out, whether my usage is wrong, or Bootstrap 4 is not possible to specify responsive column width. Any hints are highly appreciated.

Update #1 Regarding @CamiloTerevinto 's suggestion, col-xs-* is now renamed to col-*.

Update #2 I found some related discussions in their issue tracker:

1. https://github.com/twbs/bootstrap/issues/21547
2. https://github.com/twbs/bootstrap/issues/21913

A temporary workaround for this is to set the <tr class="row"> and then set the rest columns with col-1. But as the author mentioned that you have to set the same classes in td which is not very practical.

Convert

Just as an FYI: col-xs-* was dropped (no longer exists in Bootstrap 4), you have to use col-* instead – Noland

Any news on this? – Third

Answer 1

Just use the class row on the <tr> tag, like this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<table class="table table-bordered">
<tr class="row">
  <td class="col-md-3">1</td>
  <td class="col-md-3">2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
  <td>8</td>
  <td>9</td>
  <td>10</td>
  <td>11</td>
  <td>12</td>
  <td>13</td>
</tr>
</table>
</div>
</div>

this should fix the problem

Wynd

Answer 2

You won't be able to use Bootstrap markup for a 13 column grid.

What you can do to guarantee the 25%,25% out of 50% and the others to be 50% is set them in larger divs as seen below.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<tr>
  <div class="col-xs-6">
      <td class="col-xs-3">COL 1</td>
      <td class="col-xs-3">COL 2</td>
  </div>
  <div class="col-xs-6">
      <div class="col-xs-2">
        <td>COL 3</td>
        <td>COL 4</td>
        <td>COL 5</td>
        <td>COL 6</td>
      </div>
      <div class="col-xs-2">
        <td>COL 7</td>
        <td>COL 8</td>
        <td>COL 9</td>
        <td>COL 10</td>
      </div>
      <div class="col-xs-2">
        <td>COL 11</td>
        <td>COL 12</td>
        <td>COL 13</td>
     </div>
  </div>
</tr>
</table>

Visser

@Convert that's because this answer is completely invalid. DIV's are not valid inside TR's – Noland