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.

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