Question

我之前在7个月之前发布了这个帖子，有人很友好地指出了正确的解决方案： bootstrap 3 responsive table with fixed first column

然而，这突然停止工作，固定柱不再固定。要查看它的实际效果，请转到：http://nasgame.apphb.com （示例数据：搜索Matt Vincent并选择Pro）

第一列现在滚动显示其余内容。

这是执行代码：

jquery的

$(function(){
var $table = $('.table');
//Make a clone of our table
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');

//Remove everything except for first column
$fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();

//Match the height of the rows to that of the original table's
$fixedColumn.find('tr').each(function (i, elem) {
    $(this).height($table.find('tr:eq(' + i + ')').height());
});
});

CSS

.table-responsive>.fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
}
@media(min-width:768px) {
.table-responsive>.fixed-column {
    display: none;
}
}

Answer 1

它看起来像是在工作，但由于某些克隆的表格单元格具有透明背景，您可以看到它们背后的表格：

enter image description here

在我的屏幕截图中，您可以看到奇数行看起来很好，因为单元格有灰色背景。

你可以通过给偶数单元格提供背景来解决这个问题。

我认为这可能会这样做：

.table-striped > tbody > tr:nth-child(even) > td {
    background-color: #fff;
}

或者，正如评论中建议的3rror404，在整个表格上设置background-color：

.table-striped > tbody {
    background-color: #fff;
}

Answer 2

.table-responsive>.fixed-column {
  position: fixed;
}

这种变化有更好的结果，但还不是很正确。

nasgame http://f.cl.ly/items/3U0h0e381Y421c0z2t0Y/nasgame.gif

Answer 3

具有固定列的响应表，而无需使用任何jQuery或javascript。

HTML

<div class="table">
  <div class="table-scroll">
    <table class="table-main">
        <thead>
            <tr>
                <th class="fix-col">Name</th>
                <th>Designation</th>
                <th>Experience</th>
                <th>Technology</th>
                <th>Company</th>
                <th>Location</th>
                <th>Contact No.</th>
                <th>Address</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="fix-col">Bob</td>
                <td>Front End Developer</td>
                <td>5 yrs</td>
                <td>HTML,CSS</td>
                <td>Google</td>
                <td>California</td>
                <td>9876543210</td>
                <td>Google Office</td>
            </tr>
            <tr>
                <td class="fix-col">Bob</td>
                <td>Front End Developer</td>
                <td>5 yrs</td>
                <td>HTML,CSS</td>
                <td>Google</td>
                <td>California</td>
                <td>9876543210</td>
                <td>Google Office</td>
            </tr>
            <tr>
                <td class="fix-col">Bob</td>
                <td>Front End Developer</td>
                <td>5 yrs</td>
                <td>HTML,CSS</td>
                <td>Google</td>
                <td>California</td>
                <td>9876543210</td>
                <td>Google Office</td>
            </tr>
            <tr>
                <td class="fix-col">Bob</td>
                <td>Front End Developer</td>
                <td>5 yrs</td>
                <td>HTML,CSS</td>
                <td>Google</td>
                <td>California</td>
                <td>9876543210</td>
                <td>Google Office</td>
            </tr>
            <tr>
                <td class="fix-col">Bob</td>
                <td>Front End Developer</td>
                <td>5 yrs</td>
                <td>HTML,CSS</td>
                <td>Google</td>
                <td>California</td>
                <td>9876543210</td>
                <td>Google Office</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.table-main {
    border: none;
    border-right: solid 1px rgb(75, 90, 102);
    border-collapse: separate;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}

.table-main thead th {
    background-color: rgb(203, 220, 233);
    border: none;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
}

.table-main tbody td {
    border-bottom: solid 1px rgb(75, 90, 102);
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
}

.table {
    position: relative;
}

.table-scroll {
    margin-left: 131px;
    overflow-x: scroll;
    overflow-y: visible;
    padding-bottom: 5px;
    width: 500px;
}

.table-main .fix-col {
    border-left: solid 1px rgb(75, 90, 102);
    border-right: solid 1px rgb(75, 90, 102);
    left: 0;
    position: absolute;
    top: auto;
    width: 110px;
}

这是JSFiddle链接：https://jsfiddle.net/mahendra_ahada/vqkxcn3s/1/

具有固定列的响应表

3 个答案: