Question

有人可以帮忙解决这个问题吗？

<div>
<table>
    <tr>
        <td class="headcol">Fiddle Options</td>
        <td class="long">Created and maintained by Piotr and Oskar. Hosted by DigitalOcean. Special thanks to MooTools community.</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
        <td class="headcol">Legal, Credits and Links</td>
        <td class="long" style="width:300px">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long" style="width:300px">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
        <td class="headcol">Ajax Requests</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
</table>

        table {
        border-collapse:separate;
        border-top: 1px solid grey;
    }
    td {
        margin:0;
        border:1px solid grey;
        border-top-width:0px;
    }
    div {
        width: 600px;
        overflow-x:scroll;
        margin-left:10em;
        overflow-y:visible;
        padding-bottom:1px;
    }
    .headcol {
        position:absolute;
        width:10em;
        left:0;
        top:auto;
        border-right: 1px none black;
        border-top-width:1px;
        /*only relevant for first row*/
        margin-top:-3px;
        /*compensate for top border*/
    }

在Firefox中，行边框似乎没有对齐。我想要一个表，其中第一列被冻结，而其余列可滚动。所有行都链接到一个滚动条，因此我可以通过MVC中的Razor视图在循环中使用。

谢谢，

Answer 1

JSBIN：http://jsbin.com/IwisANaX/3/edit

CSS

...
.freeze td:nth-child(1), 
.freeze th:nth-child(1) {  
  background: #ddd;
  position: absolute;  
  width: 20px;
  left: 0;
}
.freeze .bottomScroll {  
  overflow-x: hidden;
  margin-left: 20px;
}
...

JS

var ns = $('.newScroll', table),
    bs = $('.bottomScroll', table);
ns.scroll(function(){bs.scrollLeft(ns.scrollLeft());});

Answer 2

尝试使用

.headcol {max-width: 10em}

还要注意使用

.headcol {position: absolute}

使单元格不相对于文档对齐;这就是为什么它看起来像

Answer 3

我使用JavaScript和CSS的这种组合来解决粘性列问题。

https://jsfiddle.net/5poxyje4/

JS（评论部分有boostrap兼容代码）

var $table = $('.table');
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');

$fixedColumn.find('th:not(:first-child),td:not(:first-child),.excludeHeader').remove();

$fixedColumn.find('tr').each(function (i, elem) {
    if(elem.rowSpan = "1"){
        $(this).height($table.find('tr:eq(' + i + ')').height());
    }
    else{
        for (x = i; x <= parseInt(elem.rowSpan); x++) {
             var tempHeight = $(this).height() + $table.find('tr:eq(' + x +     ')').height();

        $(this).height(tempHeight);
    }
    }
});


//Comments for if you are using bootrap tables
//var $table = $('.table');
        //var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');

        //$fixedColumn.find('th:not(:first-child),td:not(:first-child),.excludeHeader').remove();

        //$fixedColumn.find('tr').each(function (i, elem) {
        //    $fixedColumn.find('tr:eq(' + i + ') > th:first-child,tr:eq(' + i + ') > td:first-child').each(function (c, cell) {
        //        if (cell.rowSpan == "1") {
        //            $(this).height($table.find('tr:eq(' + i + '),tr:not(.excludeRow)').height());
        //        }
        //        else {
        //            for (x = 1; x < parseInt(cell.rowSpan) ; x++) {
        //                var tempHeight = $(this).height() + $table.find('tr:eq(' + x + ')').height();

        //                $(this).height(tempHeight);

        //            }
        //        }

        //        $(this).width($table.find('.stickyColumn').first().width());
        //    });

        //});

CSS（评论部分在我的Site.css中包含bootstrap兼容代码）

.table-responsive>.fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
    /* used z-index with bootstrap */
    /*z-index: 9999;*/
}

/*This media query conflicted with my bootstrap container. I did not use it*/
@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}

/*Commented Section for if you are using bootstrap*/
/*.table-responsive>.fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
    background-color:#ffffff;
}*/

这说明了th或td的行数是否大于1。

CSS表列冻结

3 个答案: