HTML半表可滚动，而其他半表则固定

Question

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

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

Answer 1

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

Answer 2

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>

基于此代码，我创建了小提琴

Answer 3

如果您用div分隔列，则可以轻松实现设计目标。 应用所需的特定CSS样式。

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