求教！！！如何使table随着窗口的变化而变化

dw_liuqiang 2014-08-06 05:52:30
初始界面



隐藏左边导航栏后
...全文
259 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
豪情 2014-08-07
  • 打赏
  • 举报
 回复
引用 2 楼 dw_liuqiang 的回复:
[quote=引用 1 楼 jikeytang 的回复:] 1个前提条件。 一个左固定右自动的布局。 剩下的就是全局式的class操作概念。 demo here. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>test</title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
    <style type="text/css">
        div{ height:500px;}
        .wrap{ position:relative; border:1px solid #ccc;}
        .side{ position:absolute;top: 0;left: 0; width:200px;border-right: 1px solid red;}
        .btn{ position:absolute; top:50%; left:200px; margin-top:-25px; width:10px; height:50px;background:green;}
        .btn:hover{background:darkgreen;}
        .main{ margin-left:210px; border-left:1px solid blue;}
        .on .main{ margin-left:0;}
        .on .btn{ left:0px;}
    </style>
</head>
<body>
<div class="wrap">
    <div class="side"></div>
    <a class="btn" href="#"></a>
    <div class="main"></div>
</div>
<script type="text/javascript">
    var side = $('.side')
    var main = $('.main')
    var wrap = $('.wrap')
    var on = 'on'
    $('.btn').click(function(){
        if(wrap.hasClass(on)){
            side.show()
            wrap.removeClass(on)
        } else {
            side.hide()
            wrap.addClass(on)
        }
    });
</script>
</body>
</html>
现在是左侧可以隐藏，隐藏后右侧里的表没有随右侧一起变宽[/quote] 1个前提条件。 一个左固定右自动的布局。 看这三段css的处理方式。 

.wrap{ position:relative; border:1px solid #ccc;}
.side{ position:absolute;top: 0;left: 0; width:200px;border-right: 1px solid red;}
.main{ margin-left:210px; border-left:1px solid blue;}
dw_liuqiang 2014-08-07
  • 打赏
  • 举报
 回复
引用 1 楼 jikeytang 的回复:
1个前提条件。 一个左固定右自动的布局。 剩下的就是全局式的class操作概念。 demo here. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>test</title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
    <style type="text/css">
        div{ height:500px;}
        .wrap{ position:relative; border:1px solid #ccc;}
        .side{ position:absolute;top: 0;left: 0; width:200px;border-right: 1px solid red;}
        .btn{ position:absolute; top:50%; left:200px; margin-top:-25px; width:10px; height:50px;background:green;}
        .btn:hover{background:darkgreen;}
        .main{ margin-left:210px; border-left:1px solid blue;}
        .on .main{ margin-left:0;}
        .on .btn{ left:0px;}
    </style>
</head>
<body>
<div class="wrap">
    <div class="side"></div>
    <a class="btn" href="#"></a>
    <div class="main"></div>
</div>
<script type="text/javascript">
    var side = $('.side')
    var main = $('.main')
    var wrap = $('.wrap')
    var on = 'on'
    $('.btn').click(function(){
        if(wrap.hasClass(on)){
            side.show()
            wrap.removeClass(on)
        } else {
            side.hide()
            wrap.addClass(on)
        }
    });
</script>
</body>
</html>
现在是左侧可以隐藏，隐藏后右侧里的表没有随右侧一起变宽
豪情 2014-08-07
  • 打赏
  • 举报
 回复
1个前提条件。 一个左固定右自动的布局。 剩下的就是全局式的class操作概念。 demo here. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>test</title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
    <style type="text/css">
        div{ height:500px;}
        .wrap{ position:relative; border:1px solid #ccc;}
        .side{ position:absolute;top: 0;left: 0; width:200px;border-right: 1px solid red;}
        .btn{ position:absolute; top:50%; left:200px; margin-top:-25px; width:10px; height:50px;background:green;}
        .btn:hover{background:darkgreen;}
        .main{ margin-left:210px; border-left:1px solid blue;}
        .on .main{ margin-left:0;}
        .on .btn{ left:0px;}
    </style>
</head>
<body>
<div class="wrap">
    <div class="side"></div>
    <a class="btn" href="#"></a>
    <div class="main"></div>
</div>
<script type="text/javascript">
    var side = $('.side')
    var main = $('.main')
    var wrap = $('.wrap')
    var on = 'on'
    $('.btn').click(function(){
        if(wrap.hasClass(on)){
            side.show()
            wrap.removeClass(on)
        } else {
            side.hide()
            wrap.addClass(on)
        }
    });
</script>
</body>
</html>
dw_liuqiang 2014-08-07
  • 打赏
  • 举报
 回复
解决了，找到方法了 http://blog.csdn.net/w4bobo/article/details/7520226
dw_liuqiang 2014-08-07
  • 打赏
  • 举报
 回复
引用 5 楼 jikeytang 的回复:
[quote=引用 4 楼 dw_liuqiang 的回复:] [quote=引用 3 楼 jikeytang 的回复:] [quote=引用 2 楼 dw_liuqiang 的回复:] [quote=引用 1 楼 jikeytang 的回复:] 1个前提条件。 一个左固定右自动的布局。 剩下的就是全局式的class操作概念。 demo here. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>test</title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
    <style type="text/css">
        div{ height:500px;}
        .wrap{ position:relative; border:1px solid #ccc;}
        .side{ position:absolute;top: 0;left: 0; width:200px;border-right: 1px solid red;}
        .btn{ position:absolute; top:50%; left:200px; margin-top:-25px; width:10px; height:50px;background:green;}
        .btn:hover{background:darkgreen;}
        .main{ margin-left:210px; border-left:1px solid blue;}
        .on .main{ margin-left:0;}
        .on .btn{ left:0px;}
    </style>
</head>
<body>
<div class="wrap">
    <div class="side"></div>
    <a class="btn" href="#"></a>
    <div class="main"></div>
</div>
<script type="text/javascript">
    var side = $('.side')
    var main = $('.main')
    var wrap = $('.wrap')
    var on = 'on'
    $('.btn').click(function(){
        if(wrap.hasClass(on)){
            side.show()
            wrap.removeClass(on)
        } else {
            side.hide()
            wrap.addClass(on)
        }
    });
</script>
</body>
</html>
现在是左侧可以隐藏，隐藏后右侧里的表没有随右侧一起变宽[/quote] 1个前提条件。 一个左固定右自动的布局。 看这三段css的处理方式。 

.wrap{ position:relative; border:1px solid #ccc;}
.side{ position:absolute;top: 0;left: 0; width:200px;border-right: 1px solid red;}
.main{ margin-left:210px; border-left:1px solid blue;}
[/quote] 右侧是内嵌的网页，点击隐藏左侧后，右侧的网页会随着变宽，但网页内的table不会随着变宽，网页会留下一段空白[/quote] 那建议右边的table,td都是百分比布局。 比如: 

<table width="100%">
    <tr>
        <td width="20%">11</td>
        <td>22</td>
    </tr>
</table>
[/quote] 右侧页面的table用的是jqgrid插件显示数据 
<table id="list" style="border-collapse: collapse" class="scroll" cellpadding="0" cellspacing="0"></table>
豪情 2014-08-07
  • 打赏
  • 举报
 回复
引用 4 楼 dw_liuqiang 的回复:
[quote=引用 3 楼 jikeytang 的回复:] [quote=引用 2 楼 dw_liuqiang 的回复:] [quote=引用 1 楼 jikeytang 的回复:] 1个前提条件。 一个左固定右自动的布局。 剩下的就是全局式的class操作概念。 demo here. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>test</title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
    <style type="text/css">
        div{ height:500px;}
        .wrap{ position:relative; border:1px solid #ccc;}
        .side{ position:absolute;top: 0;left: 0; width:200px;border-right: 1px solid red;}
        .btn{ position:absolute; top:50%; left:200px; margin-top:-25px; width:10px; height:50px;background:green;}
        .btn:hover{background:darkgreen;}
        .main{ margin-left:210px; border-left:1px solid blue;}
        .on .main{ margin-left:0;}
        .on .btn{ left:0px;}
    </style>
</head>
<body>
<div class="wrap">
    <div class="side"></div>
    <a class="btn" href="#"></a>
    <div class="main"></div>
</div>
<script type="text/javascript">
    var side = $('.side')
    var main = $('.main')
    var wrap = $('.wrap')
    var on = 'on'
    $('.btn').click(function(){
        if(wrap.hasClass(on)){
            side.show()
            wrap.removeClass(on)
        } else {
            side.hide()
            wrap.addClass(on)
        }
    });
</script>
</body>
</html>
现在是左侧可以隐藏，隐藏后右侧里的表没有随右侧一起变宽[/quote] 1个前提条件。 一个左固定右自动的布局。 看这三段css的处理方式。 

.wrap{ position:relative; border:1px solid #ccc;}
.side{ position:absolute;top: 0;left: 0; width:200px;border-right: 1px solid red;}
.main{ margin-left:210px; border-left:1px solid blue;}
[/quote] 右侧是内嵌的网页，点击隐藏左侧后，右侧的网页会随着变宽，但网页内的table不会随着变宽，网页会留下一段空白[/quote] 那建议右边的table,td都是百分比布局。 比如: 

<table width="100%">
    <tr>
        <td width="20%">11</td>
        <td>22</td>
    </tr>
</table>
dw_liuqiang 2014-08-07
  • 打赏
  • 举报
 回复
引用 3 楼 jikeytang 的回复:
[quote=引用 2 楼 dw_liuqiang 的回复:] [quote=引用 1 楼 jikeytang 的回复:] 1个前提条件。 一个左固定右自动的布局。 剩下的就是全局式的class操作概念。 demo here. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>test</title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
    <style type="text/css">
        div{ height:500px;}
        .wrap{ position:relative; border:1px solid #ccc;}
        .side{ position:absolute;top: 0;left: 0; width:200px;border-right: 1px solid red;}
        .btn{ position:absolute; top:50%; left:200px; margin-top:-25px; width:10px; height:50px;background:green;}
        .btn:hover{background:darkgreen;}
        .main{ margin-left:210px; border-left:1px solid blue;}
        .on .main{ margin-left:0;}
        .on .btn{ left:0px;}
    </style>
</head>
<body>
<div class="wrap">
    <div class="side"></div>
    <a class="btn" href="#"></a>
    <div class="main"></div>
</div>
<script type="text/javascript">
    var side = $('.side')
    var main = $('.main')
    var wrap = $('.wrap')
    var on = 'on'
    $('.btn').click(function(){
        if(wrap.hasClass(on)){
            side.show()
            wrap.removeClass(on)
        } else {
            side.hide()
            wrap.addClass(on)
        }
    });
</script>
</body>
</html>
现在是左侧可以隐藏，隐藏后右侧里的表没有随右侧一起变宽[/quote] 1个前提条件。 一个左固定右自动的布局。 看这三段css的处理方式。 

.wrap{ position:relative; border:1px solid #ccc;}
.side{ position:absolute;top: 0;left: 0; width:200px;border-right: 1px solid red;}
.main{ margin-left:210px; border-left:1px solid blue;}
[/quote] 右侧是内嵌的网页，点击隐藏左侧后，右侧的网页会随着变宽，但网页内的table不会随着变宽，网页会留下一段空白
python tkinter 表格_求教关于tkinter treeview模仿表格控件的问题：更新表格的时候控件宽度无法控制...
所以只有用各种办法来模拟。但是在用的过程中，我用同样的数据...环境：win8.1 python3.3图1，原图，我希望点了update之后它就能更新数据，而宽度不会发生变化。 图2，结果就成这个样子了。 import tkinter as tkim...
C#编程笔记（二）
用户在提需求的时候，希望Button之类的图标能够更漂亮一些，圆角矩形那种的，开始的时候孤陋寡闻，不知道这个东西还能咋变化，跟人说这个不太可能。后来逼急了，在网上一顿搜，才知道了用户自定义控件这个东西，找到...
informatica 学习日记整理
Parameters and Variables,在窗口新增变量或者参数，并对它的 数据类型，数据大小，初始值进行设置。添加的参数和变量在本mapping的transformation的表达式中就可以使用了。这些参数和变 量的值还可以设置在.txt...
Informatica 初学日记全
Mapping 只是数据抽取过程的设计，要使这个过程运行必须为该Mapping建立对应的session,然后运行该session。选择Operations-Add Session,在窗口中选择一个Mapping点击ok会出现编辑该session的窗口。 Session输入框...
家教平台系统设计
它是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。在这种结构下，用户工作界面是通过WWW浏览器来实现，极少部分事务逻辑在前端（Browser）实现，但是主要事务逻辑在服务器端（Server）实现，形成...
CSS

61,114

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章