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>

根据此代码，我创建了fiddle

Answer 3

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

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

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

3 个答案: