我正在使用 Bootstrap 的表格响应来为我的布局创建一个简单的响应表格。但是,此类仅适用于移动设备。有什么方法可以让它也适用于平板电脑吗?
<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>
这是代码。这只是一个简单的表格布局。 这就是它在手机上的样子,我的手机变小了。即使我调整了我的 css 的宽度,它也不会响应。
最佳答案
如果您想要强制表格保持您预期的列显示,您可能需要考虑在 CSS 中使用 !important
规则来设置宽度。
或者您可以像下面的示例那样使用 white-space: nowrap;
强制列不插入换行,否则会在您的表格开始以响应方式运行之前首先发生。换句话说,在尝试将文本移动到第二行之前,您是在强制表格响应。
<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>
关于html - Bootstrap table-responsive 在平板电脑上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34780771/