html - 如何卡住表头中的3或4列开头并其余部分可滚动

我需要下面提供的表，其中“开始”的前四列与标题一起冻结，其余部分保持可滚动状态。

例如：
页眉1、2、3、4和列1、2、3、4应该固定，并保留页眉和列，例如页眉5、6、7、8、9、10和列5、6、7、8、9 ，10应该是可滚动的。

HTML：

<div class="outer">
    <div class="inner">
        <table>
            <thead>
                <tr>
                    <th>Hearder A</th>
                    <th>Hearder B</th>
                    <th>Hearder C</th>
                    <th>Hearder D</th>
                    <th>Hearder E</th>
                    <th>Hearder F</th>
                    <th>Hearder G</th>
                    <th>Hearder H</th>
                    <th>Hearder I</th>
                    <th>Hearder J</th>
                    <th>Hearder K</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>col 1 - C</td>
                    <td>col 2 - C</td>
                    <td>col 3 - C</td>
                    <td>col 4 - C</td>
                    <td>col 5 - C</td>
                    <td>col 6 - C</td>
                    <td>col 7 - C</td>
                    <td>col 8 - C</td>
                    <td>col 9 - C</td>
                    <td>col 10 - C</td>
                    <td>col 11 - C</td>
                </tr>
                <tr>
                    <td>col 1 - C</td>
                    <td>col 2 - C</td>
                    <td>col 3 - C</td>
                    <td>col 4 - C</td>
                    <td>col 5 - C</td>
                    <td>col 6 - C</td>
                    <td>col 7 - C</td>
                    <td>col 8 - C</td>
                    <td>col 9 - C</td>
                    <td>col 10 - C</td>
                    <td>col 11 - C</td>
                </tr>
                <tr>
                    <td>col 1 - C</td>
                    <td>col 2 - C</td>
                    <td>col 3 - C</td>
                    <td>col 4 - C</td>
                    <td>col 5 - C</td>
                    <td>col 6 - C</td>
                    <td>col 7 - C</td>
                    <td>col 8 - C</td>
                    <td>col 9 - C</td>
                    <td>col 10 - C</td>
                    <td>col 11 - C</td>
                </tr>
                <tr>
                    <td>col 1 - C</td>
                    <td>col 2 - C</td>
                    <td>col 3 - C</td>
                    <td>col 4 - C</td>
                    <td>col 5 - C</td>
                    <td>col 6 - C</td>
                    <td>col 7 - C</td>
                    <td>col 8 - C</td>
                    <td>col 9 - C</td>
                    <td>col 10 - C</td>
                    <td>col 11 - C</td>
                </tr>
                <tr>
                    <td>col 1 - C</td>
                    <td>col 2 - C</td>
                    <td>col 3 - C</td>
                    <td>col 4 - C</td>
                    <td>col 5 - C</td>
                    <td>col 6 - C</td>
                    <td>col 7 - C</td>
                    <td>col 8 - C</td>
                    <td>col 9 - C</td>
                    <td>col 10 - C</td>
                    <td>col 11 - C</td>
                </tr>
        </table>
    </div>
</div>

CSS：

table{
    table-layout: fixed;
    width: 100%;
    *margin-left: -100px;/*ie7*/
    text-align:left;
}

.outer {
    position:relative;
    width:100%;
}

.inner {
    overflow-x:scroll;
    overflow-y:visible;
    width:80%;
    margin-left:50px;
}

td, th {
    vertical-align: top;
    border-top: 1px solid #ccc;
    padding:10px;
    width:100px;
}

最佳答案

这可能会有所帮助。

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

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<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>

关于html - 如何卡住表头中的3或4列开头并其余部分可滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48264446/