Bootstrap table-responsive on tablet - html

Question

I am using bootstrap's table-responsive to create a simple responsive table for my layout. However this class only works on mobile. Is there a way I can make it work on tablet as well?
<div class="histlog col-md-12">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="hist1">One</th>
<th class="hist2">Two</th>
<th class="hist3">Three</th>
<th class="hist4">Four</th>
<th class="hist5">Five</th>
<th class="hist6">Siz</th>
<th class="hist7">Seven</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>
Here is the code. it is just a simple table layout.
And this is how it looks on mobile, my cells got smaller. Even when i adjusted the widths on my css, it wont respond to it.

Answer 1

You may want to consider using the !important rule in your CSS for your widths if you want to force the table to maintain the columns displayed as you anticipate.
Or you can use white-space: nowrap; like the example below to force the columns to not insert break lines that otherwise would happen first before your table starts behaving in a responsive manner. In other words, you are forcing the table to become responsive before trying to move text to a second line.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
td {
white-space: nowrap;
}
</style>
<div class="histlog col-md-12">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="hist1">One</th>
<th class="hist2">Two</th>
<th class="hist3">Three</th>
<th class="hist4">Four</th>
<th class="hist5">Five</th>
<th class="hist6">Siz</th>
<th class="hist7">Seven</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>1asdfasdf</td>
<td>2asdfasdfasdf</td>
<td>3asdfasdfasdf</td>
<td>4asdfasd</td>
<td>5asdfasddf asdf as</td>
<td>6wer wer we </td>
<td>7asdf asdfwe </td>
<td>8sdfds f sd</td>
</tr>
</tbody>
</table>
</div>