Question

我需要您的帮助来修复响应式屏幕中的第一列这是我的表：

<div class="row">
    <div class="col-lg-6">
        <div class="panel panel-default">
            <div class="panel-heading">Hover Rows</div>
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Number</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Username</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Number 1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <td>Number 2</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <td>Number 3</td>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@twitter</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

这是jsfiddle http://jsfiddle.net/faissal_aboullait/5g523nqx/ 我需要的是第一列（数字）仍然在响应式设计中修复，我在stackoverflow中尝试了很多解决方案，但对我的情况没有任何作用。

Answer 1

尝试这个小提琴http://jsfiddle.net/zS7Ny/

<html>
    <head>
        <script src = "jquery-2.1.4.min.js">
        </script>
        <script src = "iframe.js">
        </script>
        <style>
            button{
                position : relative;
            }
        </style>
    </head>
    <body>
        <div class = "frame">
            <iframe src = 'demo.html' id = "sd" frameBorder='0' scrolling = "no" height = "100%" width = '100%'>
            </iframe>
        </div>
            <button id ="zoomIn">
                zoom in
            </button>
    </body>
</html>

Answer 2

您可以简单地添加：

tr td:nth-child(1){
    width: 100px;
}

它将强制每个第一个单元格具有固定大小

Fiddle example

固定表格中的列

2 个答案: