带有固定右列的Div表 [英] Div Table with fixed right column

问题描述

我最近把一个非营利网站作为一个项目。我正在与一个现有的网站合作，所以我必须与很多已编程的东西，所以我要做的是创建设计。

我做了一个基本上我不能弄清楚如何做的图：

我也做了一个JSFIDDLE的已经有： http://jsfiddle.net/RmWu7/ 。我知道我应该使用表格数据的表，但编程有点奇怪，我似乎不知道如何修改php使用正则表，所以我只是要保持div。

有两件事：

1. 类 .last 和 overflow-x： position：fixed




2. 如何获取固定大小的列？的流体，并有最后的非固定列（在列之前的.last类）要更大，以填充表如图所示？

我试图保留它主要在CSS，但是我需要添加jQuery？ p>



感谢您的帮助！

解决方案

确定我完全改变了代码，因为我以前的版本在滚动时有问题。

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

css：

 code> .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; 
 $（'.column' b $ b innerWidth + = $（this）.outerWidth（）; 
}）; 
 var gap = scrollingWidth  -  innerWidth + lastWidth; 
 if（gap> lastWidth）{
 $（'。table .wrap .column：last'）。css（'width'，gap）; 
 innerWidth + = gap  -  lastWidth; 
} 
 $（'。 wrap2'）。css（'width'，innerWidth）; 
}）; 
  

I recently took up a non-profit website as a project. I'm working with an existing website, so I'm having to work with a lot of the stuff already programmed, so all I have to do is create the design.

I made a diagram of basically what I can't figure out how to do:

I also made a JSFIDDLE of what is already there:http://jsfiddle.net/RmWu7/. I know I should of used a table for tabular data, but the programming is a bit weird, and I can't seem to figure out how to modify the php to work with a regular table, so I'm just going to keep the divs.

So two things:

1. I tried adding a position:fixed to .columns with the .last class, and an overflow-x:auto to the rest, but it completely messes up the layout.

2. How can I get the columns to be a fixed size instead of fluid, and have the last non-fixed column (before the columns with the .last class) to be bigger to fill up the table like in the diagram?

I'm trying to keep it mostly in CSS, but do I need to add jQuery as well?

Thanks for all help!

解决方案

Ok I've totally change the codes as my previous version has problem on scrolling.

<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表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！