html - Bootstrap table-responsive 在平板电脑上

Question

我正在使用 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>&nbsp;</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 的宽度，它也不会响应。

Answer 1

如果您想要强制表格保持您预期的列显示，您可能需要考虑在 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>&nbsp;</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>