In Bootstrap 3, I can easily create a responsive sensitive table. I can split the columns into their grid. Moreover, I can hide some columns for small devices. Here is my example. The table has 13 columns. The first two columns are 25% wide, the remaining columns will 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 above code does not work in Bootstrap 4. You can see that column widths are not expected. I checked their release notes; it does not mention a change in the layout of the table.
<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 find out if my use is incorrect or Bootstrap 4 does not allow me to specify a sensitive column width. Any advice is appreciated.
Update # 1 Regarding the @CamiloTerevinto proposal, col-xs-* now renamed to col-* .
Update # 2 I found some related discussions in my tracker:
The workaround for this is to set <tr class="row"> and then the rest of the columns with col-1 . But since the author mentioned that you should install the same classes in td , which is not very practical.
source share