2 qq 34307205 qq_34307205 于 2016.03.21 11:20 提问

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

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

5个回答

enpterexpress
enpterexpress   Rxr 2016.03.21 11:32

excel?????

qq_34307205
qq_34307205 table
2 年多之前 回复
qq_34307205
qq_34307205 网页里的table
2 年多之前 回复
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了,相互不影响
2 年多之前 回复
qq_34307205
qq_34307205 嗯,你解释的是右边y滚动,如果是右边x滚动,然后左右都有y滚动 也是一样吗?
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
上面固定,左侧固定,右侧内容可滚动
lang="en"> charset="UTF-8"> 上面固定,左侧固定,右侧内容可滚动 type="text/css"> *{margin:0; padding:0;} html,body{overflow:hidden;width:100%; height:100%;} .top{width:100%; height:30px; background:#00f;} .con{po
HTML实现左侧内容可滚动,右侧列表固定布局
一、前言:最近在项目中,遇到一个页面布局问题,说是布局,其实就是实现一个新闻页面的交互问题;功能比较常见,就是左侧的内容部分可以滚动,右侧的列表固定定位。这个功能比较常见,目前已实现,就是布局+JS配合实现该效果;先上图,大概就是下图右侧列表随滚动条固定在右侧,左侧可以滚动的效果,当滚动条接近底部时,为了使右侧列表不覆盖底部,需要用js处理,设置右侧列表的bottom值,具体请看代码。 二,
固定顶部导航栏和左侧边栏滚动条为右下方的一类布局分析
在管理界面或者一些需要固定显示信息的界面,经常遇到这样的布局:顶部导航栏固定不动,左侧有一个侧边栏用来显示详细信息,右下侧为主要内容所在区域。如下图所示: 这是需要达到的目标效果。其中Header和SideNav部分之间用固定定位实现就可以了,但是MainContent部分右侧的scroll bar确实不太好处理,主要存在两个问题: - 按照普通的方式基本都会铺满右侧整个可视区域,这使得顶部
jquery 动态的把table左边列表固定不动,右边可上下滑动。
function FixTable(TableID, FixColumnNumber, width, height) {     if ($("#" + TableID + "_tableLayout").length != 0) {         $("#" + TableID + "_tableLayout").before($("#" + TableID));         $("
CSS—左边固定,右边自适应
left   right // 左边浮动,右边margin-left #left{ float:left; width:200px; background-color:red; } #right{ background-color:green; margin-left: 200px; }
页面布局左侧固定宽度,右侧屏幕自适应
开发初期,页面布局要实现左侧固定宽度右侧屏幕自适应,且右侧内容块的距离是8px固定,我们考虑的最小分辨率是1366px,1366以下并不能像bootstrap那样内容块被挤下去。因为没有考虑清楚,没有使用bootstrap,采用了左边用px,右侧用rem,当屏幕&amp;lt;1366px,font-size=100px.固定了宽度。结果出现问题,大于1366px,由于左侧固定宽度,分辨率变大,右侧变大,...
CSS常见布局:左侧固定,右侧自适应
这是一个很常见的布局,当然也可以实现右侧自适应,左侧自适应。比如常见的网页中,左侧导航栏是固定的,右侧的内容区要自适应浏览器的大小。 现在我们来看下HTML布局:<div id="outer"> <div id="sidebar" style="height:240px;">固定宽度区</div> <div id="content" style="height:340px;">自适应区</
jquery插件table表格头部和左侧固定
大家可能经常需要展示数据或者报表,表头如果滚动上去后,查看数据的类别和字段是个麻烦事情,在这里我们推荐来自tympanus的一个JS实现的 table表头固定效果,相信大家肯定会受益的,这个demo使用了jQuery来实现,所以能够很好的支持各种浏览器上的报表展示!
页面布局--左边固定右边自适应两栏布局
[转载]原文链接 总结一下左边固定,右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。 基础代码: HTML &amp;lt;div class=&quot;wrapper wrapper-inline-block&quot; id=&quot;wrapper&quot;&amp;gt; &amp;lt;div class...
固定div位置,不随滚动条滚动
我们在html页面中的某处,可能要固定div的位置,下面我们编写js来控制 1、只能在初始页面的可视区域固定div 编写js代码: jQuery.fn.floatdiv=function(location){ //判断浏览器版本 var isIE6=false; var Sys = {}; var ua = navigator.userAgent.toLowerCase(