Question

我最近把一个非营利性网站作为一个项目。我正在使用现有的网站，所以我不得不使用已编程的很多东西，所以我所要做的就是创建设计。

我做了一个基本上我无法弄清楚如何做的图： enter image description here

我还制作了一个已存在的JSFIDDLE：http://jsfiddle.net/RmWu7/。我知道我应该使用表格来表格数据，但编程有点奇怪，我似乎无法弄清楚如何修改php以使用常规表，所以我只是要保持的div。

所以有两件事：

我尝试将position:fixed添加到包含.last类的.columns，并在其余部分添加overflow-x:auto，但它会完全混淆布局。
如何使列成为固定大小而不是流体，并使最后一个非固定列（在具有.last类的列之前）更大以填充表格，就像在图？

我试图将它主要保留在CSS中，但我是否还需要添加jQuery？

感谢您的帮助！

Answer 1

好的，我完全更改了代码，因为我之前的版本在滚动方面存在问题。

<div class="table">
    <div class="wrap">
        <div class="wrap2">
            <div class='column'>
                <div class='row top'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
            </div>
            <div class='column'>
                <div class='row top'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
            </div>
            <div class='column'>
                <div class='row top'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
                <div class='row'>Test</div>
            </div>
        </div>
    </div>
    <div class='column fixed-column'>
      <div class='row top'>Test</div>
      <div class='row'>Test</div>
      <div class='row'>Test</div>
      <div class='row'>Test</div>
      <div class='row'>Test</div>
      <div class='row'>Test</div>
      <div class='row'>Test</div>
    </div>
</div>

的CSS：

.table{
    overflow: hidden;
    position: relative;
    .wrap {
        overflow-x: auto;
    }
    .wrap2 {
        overflow: hidden;
        zoom: 1;
    }
    .column{
        float:left;
        background:red;
        width:200px;
        .row{
            padding:10px;
            &.top{
                background:green;
            }
        }
        &.fixed-column {
            position: absolute;
            right: 0;
            top: 0;
            background:blue;
        }
    }
}

jQuery的：

$(function() {
    var scrollingWidth = $('.table').innerWidth();
    var lastWidth = $('.table .wrap .column:last').outerWidth();
    var innerWidth = 0;
    $('.table .column').each(function() {
        innerWidth += $(this).outerWidth();
    });
    var gap = scrollingWidth - innerWidth + lastWidth;
    if(gap > lastWidth) {
        $('.table .wrap .column:last').css('width', gap);
        innerWidth += gap - lastWidth;
    }
    $('.table .wrap2').css('width', innerWidth);
});

Div表，右列固定

1 个答案: