【问题标题】:Table border is missing for bootstrap responsive table view引导响应式表格视图缺少表格边框
【发布时间】:2015-05-24 20:47:01
【问题描述】:

我在 Firefox 浏览器的数据表视图中遇到了一个奇怪的问题。

<div class="table-responsive">
    <table class="table table-striped table-bordered" id="viewData">
        <thead>
            <tr>
                <th class="text-left tbl-head" align="left"></th>
                <th class="text-left tbl-head" align="left">people Name</th>
                <th class="text-left tbl-head" align="left">Email</th>
                <th class="text-left tbl-head" align="left">City</th>
                <th class="text-left tbl-head" align="left">Country</th>
                <th class="text-left tbl-head" align="left"> Time</th>
                <th class="text-left tbl-head" align="left">Subject</th>
                <th class="text-left tbl-head" align="left">Message</th>
                <th class="text-left tbl-head" align="left">Status</th>
                <th class="text-left tbl-head" align="left">Reply</th>
            </tr>
        </thead>
        <tbody id="dataView">
            <tr id="631" class="tbl-bg-color">
                <td class="text-left" align="left"><input  type="checkbox"></td>
                <td class="text-left" align="left">shamim</td>
                <td class="text-left" align="left">xyz@gmail.com</td>
                <td class="text-left" align="left">washington</td>
                <td class="text-left" align="left">usa</td>
                <td class="text-left" align="left">18-Mar-15</td>
                <td class="text-left" align="left">hi</td>
                <td class="text-left" align="left">hi</td>
                <td class="text-left" align="left">UnReplied</td>
                <td class="text-left" align="left"><button class="btn-primary btn btn-bg">Reply</button></td>
            </tr>
            <tr id="619" class="tbl-bg-color">
                <td class="text-left" align="left"><input  type="checkbox"></td>
                <td class="text-left" align="left">test</td>
                <td class="text-left" align="left">test@yahoo.co</td>
                <td class="text-left" align="left">washington</td>
                <td class="text-left" align="left">usa</td>
                <td class="text-left" align="left">15-Mar-15</td>
                <td class="text-left" align="left">123123</td>
                <td class="text-left" align="left">123123</td>
                <td class="text-left" align="left">Replied</td>
                <td class="text-left" align="left"><button class="btn-primary btn btn-bg">Reply</button></td>
            </tr>
            <tr id="596"  class="tbl-bg-color">
                <td class="text-left" align="left"><input  type="checkbox"></td>
                <td class="text-left" align="left">monir</td>
                <td class="text-left" align="left">vvv@yahoo.com</td>
                <td class="text-left" align="left">india</td>
                <td class="text-left" align="left">-</td>
                <td class="text-left" align="left">06-Mar-15</td>
                <td class="text-left" align="left">test</td>
                <td class="text-left" align="left">hii...test</td>
                <td class="text-left" align="left">Replied</td>
                <td class="text-left" align="left"><button class="btn-primary btn btn-bg">Reply</button></td>
            </tr>
            <tr id="594" class="tbl-bg-color">
                <td class="text-left" align="left"><input  type="checkbox"></td>
                <td class="text-left" align="left">t mob</td>
                <td class="text-left" align="left">t@y.com</td>
                <td class="text-left" align="left">washington</td>
                <td class="text-left" align="left">-</td>
                <td class="text-left" align="left">06-Mar-15</td>
                <td class="text-left" align="left">hi</td>
                <td class="text-left" align="left">hi bb</td>
                <td class="text-left" align="left">UnReplied</td>
                <td class="text-left" align="left"><button class="btn-primary btn btn-bg">Reply</button></td>
            </tr>
        </tbody>
    </table>
</div>

我已经粘贴了我的代码。在这里,当我放大我的 Firefox 浏览器时,它缺少几条边框线。当我查看 80% 的分辨率时,我发现电子邮件列的右边框丢失了。

火狐浏览器的bootstrap问题是什么?在其他浏览器中,我没有遇到问题。

【问题讨论】:

    标签: css twitter-bootstrap firefox html-table


    【解决方案1】:

    从其他答案中,确保您的缩放级别为 100%,否则 Firefox 会在尝试折叠边框时遇到问题。

    Ctrl + 0 将重置您的缩放。

    响应式网站更多的是减少浏览器窗口的大小而不是缩放级别。

    【讨论】:

      猜你喜欢
      • 2018-12-07
      • 2015-10-09
      • 2020-06-05
      • 1970-01-01
      • 2013-04-27
      • 2018-06-22
      • 1970-01-01
      • 2014-03-02
      • 2013-09-21
      相关资源
      最近更新 更多