Javascript 具有固定右列的Div表

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

我做了一个图表，基本上我不知道怎么做：

我还对已经存在的内容做了一个简化：。我知道我应该使用一个表来处理表格数据，但是编程有点奇怪，我似乎不知道如何修改php来处理常规表，所以我只保留div

所以有两件事：

我尝试在带有

.last

类的.columns中添加一个

位置：fixed

，在其余部分添加一个

overflow-x:auto

，但这完全打乱了布局

如何使列成为固定大小而不是流体，并使最后一个非固定列（在具有.last类的列之前）更大以填充表，如图所示

我试图将它主要保存在CSS中，但我是否也需要添加jQuery

---

谢谢你的帮助

好的，我已经完全更改了代码，因为我以前的版本在滚动上有问题

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

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);
});

---

谢谢你的回答，但是有没有可能让它显示为一个表格，中间没有间隙：？@我正在编辑，似乎还有其他问题。好的，我已经完成了编辑。如果让你生气，我道歉。

$(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);
});