1

有人可以帮忙吗

http://jsfiddle.net/smilepak/8qRQB/4/

<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 视图循环使用。

谢谢，

4

3 回答 3

2

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());});
于 2014-01-16T19:04:35.500 回答
0

尝试使用

.headcol {max-width: 10em}

还要注意，使用

.headcol {position: absolute}

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

于 2013-07-12T07:08:14.273 回答
0

我使用这种 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 中有引导兼容代码）

.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。

于 2015-09-29T20:20:57.853 回答