html - 如何卡住表格中带有标题的 3 或 4 列开始并保持可滚动

Question

我需要下面提供的表格，将开始的前四列与标题一起卡住，其余部分可滚动。

例如: 标题 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;
}

Answer 1

这可能会有所帮助。

        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>