2 qq 34307205 qq_34307205 于 2016.03.21 11:20 提问

表格如何将左侧固定,右侧增加X滚动条
x

一个3行10列的表格,将左边3列固定,右边7列加入scroll-x滚动条,求推荐方法

5个回答

enpterexpress
enpterexpress   2016.03.21 11:32

excel?????

qq_34307205
qq_34307205 table
一年多之前 回复
qq_34307205
qq_34307205 网页里的table
一年多之前 回复
sinat_34254650
sinat_34254650   2016.03.21 14:37

好办。先用一个大表格分两列,一列里用一个table分三列放固定不动的,一列里用一个table放七列可以滚动的。然后把table属性变成display:block,再定位就可以了

sinat_34254650
sinat_34254650   2016.03.21 14:41

比如html可以这样:

test1 test2 test3
test1 test2 test3
test1 test2 test3
            </td>
            <td>
                <table class="table-scroll">
                    <tr>
                        <td>test4</td>
                        <td>test5</td>
                        <td>test6</td>
                        <td>test7</td>
                        <td>test8</td>
                        <td>test9</td>
                        <td>test10</td>
                    </tr>
                    <tr>
                        <td>test4</td>
                        <td>test5</td>
                        <td>test6</td>
                        <td>test7</td>
                        <td>test8</td>
                        <td>test9</td>
                        <td>test10</td>
                    </tr>
                    <tr>
                        <td>test4</td>
                        <td>test5</td>
                        <td>test6</td>
                        <td>test7</td>
                        <td>test8</td>
                        <td>test9</td>
                        <td>test10</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
 style可以这样:
table { border:1px #fff solid; border-collapse:collapse;}
table tr td { border:1px #fff solid; color:#fff; vertical-align:top;padding:5px 10px;}
.table-scroll { overflow-y:scroll; display:block; height:200px;}
.table-scroll td { height:1000px;}
sinat_34254650
sinat_34254650   2016.03.21 14:43
<!DOCTYPE html>




table
























test1 test2 test3
test1 test2 test3
test1 test2 test3






























test4 test5 test6 test7 test8 test9 test10
test4 test5 test6 test7 test8 test9 test10
test4 test5 test6 test7 test8 test9 test10




table { border:1px #fff solid; border-collapse:collapse;}<br> table tr td { border:1px #ccc solid; color:#fff; vertical-align:top;padding:5px 10px; color:#f00}<br> .table-scroll { overflow-y:scroll; display:block; height:200px;}<br> .table-scroll td { height:1000px;}

sinat_34254650
sinat_34254650   2016.03.21 14:44

好恼心,贴上来样式都是丑的。你理解下我话,自己动手试下就知道了,我试了是可以的

sinat_34254650
sinat_34254650 是一样的。左右分为两个table了,相互不影响
一年多之前 回复
qq_34307205
qq_34307205 嗯,你解释的是右边y滚动,如果是右边x滚动,然后左右都有y滚动 也是一样吗?
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!