Question

在我的表中，我希望冻结第一列，并在td溢出时使其他列可滚动。

我在jsfiddle尝试了这里，但它没有按预期工作。

可以有100行。

我需要修复第一列并且具有其他列的部分是可滚动的但是单个td将保持固定 - 提前谢谢

Answer 1

虽然不完美，但根据您的使用案例以及如何生成HTML，您可以执行类似this的操作。

<强> HTML

<table id="main">
    <tr>
        <td class="first"> what are the possible values?</td>
        <td rowspan="2">
            <div class="rest">
            <table>
                <tr>
                    <td>100</td>
                    <td>200</td>
                    <td>300</td>
                    <td>400</td>
                    <td>500</td>
                    <td>600</td>
                    <td>700</td>
                    <td>800</td>
                    <td>900</td>
                    <td>1000</td>
                    <td>1100</td>
                </tr>                        
                <tr>
                    <td>100</td>
                    <td>200</td>
                    <td>300</td>
                    <td>400</td>
                    <td>500</td>
                    <td>600</td>
                    <td>700</td>
                    <td>800</td>
                    <td>900</td>
                    <td>1000</td>
                    <td>1100</td>
                </tr>                        
                </table>
            </div>
        </td>
    </tr>
    <tr class="first_column">
        <td class="first"> what are the possible values?</td>
    </tr>
</table>

<强> CSS

table {
    border-collapse: collapse;
}
table#main {
    border-top: 1px solid #DFDFDF;
    margin-bottom: 1em;
    width:400px;
    display: block;
}
table#main .first {
    width:200px;
    white-space: nowrap;
}
table#main .rest {
    overflow: scroll;
    background: silver;
    width:200px;
}
table td.first, table .rest td {
    line-height: 1.5em;
    padding: 0.5em 0.6em;
    text-align: left;
    vertical-align: middle;
    text-align: left;
}

PS 我只测试了Safari 6和Firefox 12,13＆amp; OSX上的14

使第一列固定并在表格中保持可滚动状态

1 个答案: