表格中的固定列答案

【问题标题】：Fixed column in table表格中的固定列
【发布时间】：2015-08-22 19:14:38
【问题描述】：

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

<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 中尝试了很多解决方案，但对我的情况没有任何作用。

【问题讨论】：

你能告诉我在这种情况下你所说的“固定”是什么意思吗？
像这个例子。在响应式屏幕中：datatables.net/release-datatables/extensions/FixedColumns/….
它不是固定的，它是你的看法。调整你的屏幕大小并从左到右移动它，然后你会发现不同。
是的，它没有修复，这是我需要将其更改为修复的问题
我需要帮助，这里没人吗？

标签： html css twitter-bootstrap html-table

【解决方案1】：

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

.wrap {
    width: 352px;
}

.wrap table {
    width: 300px;
    table-layout: fixed;
}

table tr td {
    padding: 5px;
    border: 1px solid #eee;
    width: 100px;
    word-wrap: break-word;
}

table.head tr td {
    background: #eee;
}

.inner_table {
    height: 100px;
    overflow-y: auto;
}

<div class="wrap">
    <table class="head">
        <tr>
            <td>Head 1</td>
            <td>Head 1</td>
            <td>Head 1</td>
        </tr>
    </table>
    <div class="inner_table">
        <table>
        <tr>
            <td>Body 1</td>
            <td>Body 1</td>
            <td>Body 1</td>
        </tr>
        <!-- Some more tr's -->
    </table>
    </div>
</div>

【讨论】：

这不再有用了。我说的是第一列不是第一行
而且我不能使用两个表。我必须只使用一个

【解决方案2】：

你可以简单地添加这个：

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

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

Fiddle example

【讨论】：