HTML半表是可滚动的，而其他是固定的答案

【问题标题】：HTML half table is scrollable while others is fixedHTML半表是可滚动的，而其他是固定的
【发布时间】：2017-05-23 13:31:09
【问题描述】：

我正在尝试设计一个左列固定而右列水平滚动的表格，并且整个表格的标题在向下滚动期间是固定的。我已经搜索了一些解决方案，但只能修复一列，我的想法是在一个表格中，可以像这样滚动：

column1 column2 column3 column4 | column5 column6 column7 
------------------------------- |------------------------
                                |
//body and header are fixed     |  //only body and header can scroll  
//when scroll down              |  //horizontally, fixed while scroll 
                                |  //down

【问题讨论】：

我确信有一种方法可以达到您想要的结果
是的，我知道，但我想知道任何代码让我参考，因为我不知道如何开始......

标签： javascript jquery html css

【解决方案1】：

您可以在单独的 div 中使用两个单独的表吗？这样，您可以轻松地使一个 div 可以随意滚动，而另一个具有不同的可滚动样式。您可以使用overflow-y: scroll 和overflow-x: scroll 使父div 可滚动。

【讨论】：

我已经试过了，如果使用2个表，如果table1中的数据大小与table2不同，行将不匹配......

【解决方案2】：

如果你用 div 分隔列，可以很容易地实现设计目标。应用您想要的特定 CSS 样式。

您可以将可滚动列的标题放在另一个 div/span 标签中并使其固定。

【讨论】：

是的，是的，我试过了，但不是一个很好的设计，因为一旦不同的数据长度会导致第二张表中的行不匹配。
实际上我是在数据库中工作的，由于某些原因，无法实现单独的表。

【解决方案3】：

CSS

   table {
        width: 100%;
    }

    thead, tbody, tr, td, th { display: block; }

    tr:after {
        content: ' ';
        display: block;
        visibility: hidden;
        clear: both;
    }

    thead th {
        height: 30px;

        /*text-align: left;*/
    }

    tbody {
        height: 120px;
        overflow-y: auto;
    }

    thead {
        /* fallback */
    }


    tbody td, thead th {
        width: 19.2%;
        float: left;
    }

和 HTML：

<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>

</table>

基于此代码，我创建了fiddle

【讨论】：

不，连我想要的一个要求都不匹配。
试试这个链接jsfiddle.net/emn13/YMvk9。我认为这对你来说是最好的例子。
是的，这是我参考的第一个示例，我尝试修改属性，但仍然无法正常工作。顺便谢谢。