Utilizing Bootstrap 3, I can effortlessly create a responsive table with adjustable columns using the grid system. Additionally, I have the ability to hide certain columns on smaller devices. For instance, consider this example where the table consists of 13 columns. The first two columns occupy 25% width each, while the remaining columns share the remaining 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>The same code does not yield the expected results in Bootstrap 4. As observed, the column widths are not as intended. Despite examining their release notes, no mention of any alterations to the table layout was found.
<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>To rectify the issue in Bootstrap 4, I discovered that adding style="width:25%" for the initial two columns resolves it. Now, I aim to determine whether my approach is incorrect or if Bootstrap 4 lacks the capability to specify responsive column width accurately. Any suggestions or insights would be greatly welcomed.
Update #1
In response to @CamiloTerevinto's advice, col-xs-* has been rebranded as col-*.
Update #2 Subsequent to some explorations, discussions related to this matter were found in their issue tracker:
A temporary workaround entails setting the <tr class="row"> and then assigning the subsequent columns with col-1. Nonetheless, as pointed out by the author, replicating these classes within td tags may prove impractical.