如何给table增加左右滚动条,滚动时列对不齐的问题

给table增加左右滚动条,列对不齐,怎么弄

当前用户 应用程序 SQL执行时间 SQL
JSWX004gtrhjydddddddddddddddddddddd JDBC 2019-04-19 sel
JSWX004 JDBC 2019-04-19 select * from community t where t.id=1
JSWX004 JDBC 2019-04-19 select * from community t where t.id=1
JSWX004 JDBC 2019-04-19 select * from community t where t.id=1
JSWX004 JDBC 2019-04-19 select * from community t where t.id=1
JSWX004 JDBC 2019-04-19 select * from community t where t.id=1
JSWX004 JDBC 2019-04-19 select * from community t where t.id=1
JSWX004 JDBC 2019-04-19 select * from community t where t.id=1
JSWX004 JDBC 2019-04-19 select * from community t where t.id=1
JSWX004 JDBC 2019-04-19 select * from community t where t.id=1
JSWX004 JDBC 2019-04-19 select * from community t where t.id=1
            css样式:
              .tb2 tbody {
        display: block;
        height: 232px;
        overflow-y: scroll;
    }

    .tb2 thead{
        display: table;
        width: 100%;
    }
    .tb2 tbody tr {
        display: table;
        width: 100%;
    }

1个回答

是不是要这种效果?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box1{
            width:1500px;
            height:800px;
            overflow:auto;
        }

        .tb2{
            width:1800px;
            height:1000px;
            border-collapse: collapse; /*合并表格边框,表格边框塌陷*/
            /*border:1px solid #000;*/
            font-family: "Microsoft Yahei";
    }

        .tb2 th, .tb2 td{
/*            border:1px solid #000;*/
            text-align: left;
    }

    </style>
</head>
<body>
    <div class="box1">
        <table class="tb2">
        <tr>
            <th width="30%">当前用户</th>
            <th width="11%">应用程序</th>
            <th width="19%">SQL执行时间</th>
            <th width="40%">SQL执行时间</th>
        </tr>
        <tr>
            <td>ddddddddddddddddddddd</td>
            <td>JDBC</td>
            <td>2019-04-19</td>
            <td>sel</td>
        </tr>
        <tr>
            <td>JSWX004</td>
            <td>JDBC</td>
            <td>2019-04-19</td>
            <td>select * from community t where t.id=1</td>
        </tr>
        <tr>
            <td>JSWX004</td>
            <td>JDBC</td>
            <td>2019-04-19</td>
            <td>select * from community t where t.id=1</td>
        </tr>
        <tr>
            <td>JSWX004</td>
            <td>JDBC</td>
            <td>2019-04-19</td>
            <td>select * from community t where t.id=1</td>
        </tr>
        <tr>
            <td>JSWX004</td>
            <td>JDBC</td>
            <td>2019-04-19</td>
            <td>select * from community t where t.id=1</td>
        </tr>
        <tr>
            <td>JSWX004</td>
            <td>JDBC</td>
            <td>2019-04-19</td>
            <td>select * from community t where t.id=1</td>
        </tr>
        <tr>
            <td>JSWX004</td>
            <td>JDBC</td>
            <td>2019-04-19</td>
            <td>select * from community t where t.id=1</td>
        </tr>
        <tr>
            <td>JSWX004</td>
            <td>JDBC</td>
            <td>2019-04-19</td>
            <td>select * from community t where t.id=1</td>
        </tr>
        <tr>
            <td>JSWX004</td>
            <td>JDBC</td>
            <td>2019-04-19</td>
            <td>select * from community t where t.id=1</td>
        </tr>
        <tr>
            <td>JSWX004</td>
            <td>JDBC</td>
            <td>2019-04-19</td>
            <td>select * from community t where t.id=1</td>
        </tr>
        <tr>
            <td>JSWX004</td>
            <td>JDBC</td>
            <td>2019-04-19</td>
            <td>select * from community t where t.id=1</td>
        </tr>
    </table>
    </div>

</body>
</html>

图片说明

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
html表格table的宽度超出页面宽度时如何不改变table宽度(只显示出滚动条)?
问题如题。条件是不能将table的宽度设置为固定值,因为table包含的列数可能每次查询都不同,可能只有一二列,也可能有几十列,要求每一列宽度能够显示其表格的内容(即列的宽度按内容长度显示),如果table宽度没有超出页面宽度就不显示滚动条,也不拉伸表列宽度;如果table宽度超出页面宽度,就显示滚动条,而不压缩表列宽度。
el-table的滚动条问题
el-table的滚动条,当Y轴和X轴同时出现时,会出现一个小白点,求大神解决下,提供下思路?![图片说明](https://img-ask.csdn.net/upload/201905/27/1558944330_976528.png)
div中的table超出百分百怎么显示滚动条
想问大家一个问题,div里面的table怎么table里的td内容多时,自动出现滚动条,下面一张图是内容为空时,一张是内容增加时,显示th已经走样了这样就非常不好了,我把我的代码粘上来给给位看一看,请大家指点一下。![图片说明](https://img-ask.csdn.net/upload/201502/05/1423144304_593403.png)![图片说明](https://img-ask.csdn.net/upload/201502/05/1423144316_533933.png) <div style="overflow:auto;height:500px; width:750px;"border-bottom:1px solid #d3d3d3;"> <table width="900px" cellspacing="0" id="drug_table">
一个js table 拖拽的问题!求大佬解答
功能是 table的列可以左右拖拽替换里面的内容,但是 列过多的时候 就会出现横向滚动条,现在的情况时 拖动到最后的时候滚动条并不会跟着走,想达到的结果是 拖拽列到最后的时候 想叫横向滚动条跟着走。 希望大佬解答下!谢谢
(java)请问Bootstrap的table如何设置横向滚动条??
各位大侠好!最近遇到一个问题,Bootstrap的table列表表头过多时,都挤成了一堆, 无法设置横向滚动条,麻烦有懂的指点一下怎么添加横向滚动条,谢谢! 这是相关代码: div class=" bootstrap-admin-panel-content"> table class="table table-striped table-bordered" id="list-video"> thead> tr> th data-column-id="userId">用户ID</th> th data-column-id="userName">用户名称</th> th data-column-id="Type">用户类型</th> th data-column-id="Sex">性别</th> th data-column-id="IDCardNo">身份证</th> th data-column-id="loginName">登陆名称</th> th data-column-id="password">密码</th> th data-column-id="operation" data-formatter="operation" data-sortable="false">操作</th> /tr> /thead> /table> /div>
element表格滚动条问题
如图: ![图片说明](https://img-ask.csdn.net/upload/201905/08/1557277773_783057.png) ![图片说明](https://img-ask.csdn.net/upload/201905/08/1557277783_289420.png) 修改了表格原有的滚动条样式(宽度变窄),但是原有的宽度还有留在那里,我的操作栏那一列是固定fixed的,所以最右边就会留下缝隙,横向滚动来回滚动时也会出现缝隙 ============== 贴上滚动条样式代码 ![图片说明](https://img-ask.csdn.net/upload/201905/08/1557278303_501095.png) 操作栏列代码 ``` <el-table-column align="center" label="操作栏" width="140" fixed="right"> <template slot-scope="scope"> <el-button size="mini" plain type="primary" >编辑</el-button> <el-button size="mini" plain type="danger" >删除</el-button> </template> </el-table-column> ``` 求助。。。。
如何实现 table 中单元格有最大宽度并且可以换行,外面加带一个大小固定的带滚动条的div。
我需要做一个带滚动条的列表, 我想用一个table外面包一层带滚动条的div实现, 问题是如果把div设置成带滚动条的话。div包含的 table 的列宽就会被按div的宽度平均分配而不会出现横向的滚动条。一直无法解决所以求救csdn。希望大家给个答案。谢谢。 **下面贴出了代码。目前画面是这样的。** ![图片说明](https://img-ask.csdn.net/upload/201906/22/1561206588_296354.png) **我想做成下面这个样子** ![图片说明](https://img-ask.csdn.net/upload/201906/22/1561206624_459956.png) **以下是目前我写的代码** ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>设置表格有滚动条</title> <style> .ell21 { max-width: 100px; max-height: 80px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; text-align: left; vertical-align: top; } </style> </head> <body> <!--<div style=" border: 1px solid #000000; overflow: scroll; white-space: initial; width: 310px; ">--> <div style="width:320px; height:200px; overflow:scroll;"> <table border="1" style="table-layout:fixed; "> <tr style="max-height:50px;height:50px"> <td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴</td> <td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴阿里巴巴2阿里巴巴阿里巴巴2阿里巴巴阿里巴巴2</td> <td style="max-width: 100px; max-height:50px; word-break: break-all; ">阿里巴巴阿里巴巴3</td> <td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴阿里巴巴4</td> </tr> <tr style="max-height:50px; height:50px"> <td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴aa</td> <td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴阿里巴巴2</td> <td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴阿里巴巴3</td> <td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴阿里巴巴4</td> </tr> </table> </div> <br> <div style="border: 1px solid #000000; width: 300px; height: 50px;"> <p>width: 300px; height: 50px</p> </div> <br> <div style="border: 1px solid #000000; width: 100px; height: 50px;"> <table> <tr> <td style="width:100px;">width: 100px height: 50px</td> </tr> </table> </div> </body> </html> ```
HTML中table实现相应式导航,第一列固定,其余列根据页面宽度,出现滚动条来显示。
![CSDN移动问答][1] [1]: http://isux.tencent.com/wp-content/uploads/2013/07/20130711161935591.png 效果图如上所示,来自文章http://isux.tencent.com/responsive-web-design.html ,在文章中讲到的第三种方法,实现的方法其实有写, thead {float:left;} tbody {display:block;width:auto;overflow-x:auto;} 但是,在尝试这种方法时,总是会出现问题,thead跟tbody在页面变窄时,会错位,并不能实现上面的效果,有没有人用过这个方法呢?很紧急的问题,谢谢了!
html在IE11的环境下打开后滚动条问题
``` <html> <head> </head> <body> <table id="tableGridOuter" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="position: relative;"> <div id="divGridScroll2" style="position: relative; width: 1155px; height: 16px; overflow-x: scroll; overflow-y: hidden;"><div style="width: 4508px; height: 10px;"></div></div> </td> </tr> </tbody> </table> </body> </html> ``` 以上是自己写一段HTML,用IE11打开只有拖着方块才可以移动 点击两边的箭头和滚动条的间隙都没有用 但是放在chrom里就没问题 想问下各位大神有知道是哪里不对的么,十分感谢!!
如何用滚动条分页 ?
如何用滚动条分页 ?这是源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"> function user( ) { var result ="<table border=1><tr><td>ID</td><td>Name</td><td>Class</td></tr>"; for (var i=0;i<18;i++) { result +="<tr>"; result +="<td>"+i+"</td>"; result +="<td>"+i+"</td>"; result +="<td>"+i+"</td>"; result +="</tr>"; } result +="</table>"; document.getElementById("xianshi").innerHTML=result; } </script> </head> <body onload="user( )"> <div id="cc" style="height:250px;width:200px;overflow-y:scroll;overflow-x:hidden;"> <div style="overflow:auto;height:80"> <div id="xianshi" > </div> <p>如何实现分页呢</p> </div> </div> </body> </html> </body> </html> [b]问题补充:[/b] 是这样的大哥,我的意思是http://bbs.okajax.com/demo/4/index2.html这个例子,只不过,我把上面的滑块分页换成右边的滚动条分页 [b]问题补充:[/b] numenzq ,就是那个样的,但是,滚动条怎么在下面呀,请你再调下,然后再给你分,好吧 [b]问题补充:[/b] 大哥,我现在有一个问题想问下你,我现在滚动滚动条,滚动的时候,传出int类型的数据,应该如何实现呀?
可视化窗口减小滚动条不出现问题
![图片说明](https://img-ask.csdn.net/upload/201905/08/1557289479_32701.png)![图片说明](https://img-ask.csdn.net/upload/201905/08/1557289507_989530.png) 仿写星巴克侧面导航栏,出现的问题的是可视窗口减小不出现滚动条。 ``` <style> *{margin:0;padding: 0;} html,body{height: 100%;font-size: 10px;} a{ text-decoration: none; list-style: none; } .box{ width: 30%; height: 100%; background: red; left: 0; top: 0; overflow-y: auto; position: relative; overflow: hidden; float: left; } header{ height: 48px; padding: 24px; } header .starbuck{ float: left; margin-right: 12px; width: 36px; } header .starbuck img{ width: 36px; height: 36px; float: left; } header .iconClose{ float: right; width: 24px; } .body{ /*height: calc(100%-48px);*/ height: 100%; width: 100%; display: table; } .body .middle{ padding: 0 24px 0 48px; /*height: 100%;*/ display: table-cell; vertical-align: middle; } .body .middle ul{ width: 100%; display: inline-block; } .body .middle ul li{ display: block; margin: 5px 0; } .body .middle ul a{ font-size: 1.8rem; color: #000; padding: 5px 10px; font-weight: 700; height: 26px; line-height: 26px; display: block; } .option{ width: 100%; font-size: 16px; height: 39px; padding: 10px 0 0; } .body .option .sign-in{ float: left; margin-right: 24px; /*padding: 3px 0;*/ } .body .option .sign-in img{ margin:-3px 4px 0 0; vertical-align: middle; } .button{ border: 1px solid #00A862; border-radius: 48px; box-sizing: border-box; outline: none; overflow: hidden; } .body .option .register{ padding: 4px 12px; } .body .option a{ color: #00A862; } .footer{ font-size: 1.4rem; width: 100%; margin-top:12px; color: rgba(0,0,0,0.38); } .footer p{ font-size: 12px; } .footer p img{ width: 10px; height: 10px; } .content{ width: 70%; margin-left: 30%; background: yellow; position: relative; top: 0; right: 0; float: right; } .content .banner{ width: 100%; } .content .banner img{ width: 100%; } </style> </head> <body> <div class="box"> <header> <a href="" class="starbuck"> <img src="img/logoImg/logo.svg"/> </a> <img src="icon/icon-close.svg" class="iconClose"/> </header> <section class="body"> <div class="middle"> <ul> <li> <a href="" class="overlay">门店</a> </li> <li> <a href="" class="overlay">星享俱乐部</a> </li> <li> <a href="" class="overlay">菜单</a> </li> <li><hr/></li> <li> <a href="" id="app-overlay">星巴克移动应用</a> </li> <li> <a href="" id="stroes-overlay">星礼卡</a> </li> <li> <a href="" id="starbucks_reserve-overlay"> 星巴克臻选™</a> </li> <li> <a href="" id="starbucks_deliverey-overlay">专星送™</a> </li> <li> <a href="" id="coffeehouse-overlay">咖啡星讲堂</a> </li> <li> <a href="" id="roastery-overlay">上海烘培坊</a> </li> <li> <a href="" id="about-overlay">关于星巴克</a> </li> <li> <a href="" id="help-overlay">帮助中心</a> </li> <li><hr /></li> </ul> <div class="option"> <a href="" class="sign-in"> <img src="icon/icon-account.svg"/> <span>登录</span> </a> <a href="" class="register button"> <span>注册</span> </a> </div> </div> </section> <footer class="footer"> <a href="" id="en-collapse" class="lang">English</a> <span>&nbsp;|&nbsp;</span> <a href="" id="privacy-collapse">隐私政策</a> <span>&nbsp;|&nbsp;</span> <a href="" id="terms-collapse">使用条款</a> <p> <a href=""><img src="img/logoImg/icpicon.png"/>&nbsp;沪网安备 31010102000318号</a> <span>&nbsp;|&nbsp;</span> <a href="">沪ICP备17003747号</a> </p> </footer> </div> <div class="content"> <div class="banner"> <img src="img/summer/banner-1.jpg"/> </div> </div> </body> </html> ```
h5页面拖动table时复选框checked会重叠的问题
先看页面 ![图片说明](https://img-ask.csdn.net/upload/201811/13/1542096631_304023.png) 只显示10条数据,右边不出现滚动条,勾选正常 当选择显示20条数据时: ![图片说明](https://img-ask.csdn.net/upload/201811/13/1542096744_743853.png) 此时滚动条没有滚动过,左边的勾选框checked勾选正常 当滚动滚动条时,此时异常就出现了: ![图片说明](https://img-ask.csdn.net/upload/201811/13/1542097002_519124.png) 鼠标放置的地方却根据滚动距离往上移动了,可能是滚动条滚动了。但是checkedbox复选框却没有跟着一起滚动,下面贴代码: ![图片说明](https://img-ask.csdn.net/upload/201811/13/1542097184_421518.png) 这是复选框的代码,是根据foreach中的List的数量自动循环的复选框,下面贴整个table的代码: ![![图片说明](https://img-ask.csdn.net/upload/201811/13/1542097678_155407.png)! 图2 ![图片说明](https://img-ask.csdn.net/upload/201811/13/1542097904_532370.png) 图3
JTable中行自动滚动问题
程序从数据库取出五六十条数据,我想让表格滚动显示,为什么以下代码不可以实现呢,求大神指教 public void showTable(){ tableModel = new DefaultTableModel(tableValueV,tableColumnV); table = new MTable(tableModel,tableHeadSize); //设置行的高度 table.setRowHeight(tableRowSize); table.setEnabled(false); //在网上查到的方法,然而并没有用,为什么呢 int rowCount = table.getRowCount(); table.getSelectionModel().setSelectionInterval(rowCount-1, rowCount-1); Rectangle rect = table.getCellRect(rowCount-1, 0, true); table.repaint(); //若需要的话 table.updateUI();//若需要的话 table.scrollRectToVisible(rect); table.setBackground(Color.LIGHT_GRAY); scrollPane.setViewportView(table); }
横向滚动条覆盖表格内容
![图片说明](https://img-ask.csdn.net/upload/201705/23/1495519886_539253.png) 拉一下左边的边框才能恢复正常,刷新之后又是这样,但是如果有两条以上的数据是能够正常显示,求各路大神,这个问题怎么解决,代码如下 <style> body { width: 100%; height: 100%; overflow: auto; margin: 0em; background-color: #fff; -ms-overflow-style: scrollbar; } #opinions td{ word-wrap:break-word; word-break:break-all; } .dojoxGridMasterView{ overflow: auto !important; max-height: 90%; } </style> <body> <ui:borderContainer width="100%" height="100%" gutters="false"> <ui:toolbar region="top"> </ui:toolbar> <ui:contentPane region="top"> <table class="border" width="96%" align="center"> <tr> <td class="pagehead">前手意见查询</td> </tr> </table> </ui:contentPane> <ui:contentPane region="center" width="100%"> <ui:grid gridType='taskguide.opinionList' jsId='grid' timeout="90000" autoWidth="false" query="condition" columnReordering="true" autoHeight="true" showPagination="true" position="bottom" rowsPerPage="50" styleId="opinions"> </ui:grid> </ui:contentPane> </ui:borderContainer> </body>
table表头固定出现问题
![图片说明](https://img-ask.csdn.net/upload/201608/08/1470640470_640686.png) ![图片说明](https://img-ask.csdn.net/upload/201608/08/1470640484_672580.png) 好像是因为列是动态加载的,所以变成这样了。。。有没有大神补救的办法? ![图片说明](https://img-ask.csdn.net/upload/201608/08/1470641788_700982.png) ![图片说明](https://img-ask.csdn.net/upload/201608/08/1470641797_396912.png) 我再补充一下,就是加了那个style样式变这样,但是不加不能产生滚动条,不能固定表头。
jquery datatable 垂直滚动问题求教
//datatable function cover_typetable () { if (!jQuery().dataTable) { return; } data_table=$('#style_pro_table').dataTable({ "sDom" : "<'row'<'col-md-6 col-sm-12'l><'col-md-12 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", "sAjaxSource":"coverType/findNotinCoverType.do", "bFilter":false, "bLengthChange":true,//取消显示每页条数 "bProcessing": true, "bServerSide": true,//true依据后台排序 "bStateSave": true, "bJQueryUI":false,//是否用jquery样式 "bScrollInfinite":true, //"sScrollY":'500px', "iScrollLoadGap":2, "bAutoWidth":true, //↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓这里就是垂直滚动了! //"sScrollY":"100%", //延迟加载 //"iDeferLoading":5, "sZeroRecords": "没有检索到数据", "aoColumns": [ { 'mDataProp':'coverSmallImage',"bSortable": false, "mRender": function ( data, type, row ) { return '<div style="text-align:right;"><img style="height:80px; width="90px;" src="http://125.oss-cn-beijing.aliyuncs.com/'+data+'"></div>'; } }, { 'mDataProp':'productName',"bSortable": false}, { 'mDataProp':'productPrice',"bSortable": false}, { 'mDataProp':'salePrice',"bSortable": false } ], "aLengthMenu": [ [5, 10, 15, 20,50,100, -1], [5, 10, 15, 20,50,100, "全部"] // change per page values here ], "bRetrieve": true, "iDisplayLength": 10, "sPaginationType": "bootstrap", "oLanguage": { "sProcessing": '<i class="fa fa-coffee"></i>&nbsp;正在加载中......', "sEmptyTable" : "没有查询到数据", "sZeroRecords": "没有检索到数据", "sLengthMenu": "每页展示 _MENU_ 条 ", 'sInfoEmpty': '当前显示 0到0条,共0条记录', "sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录", "oPaginate": { "sFirst": "首页", "sPrevious": "上一页 ", "sNext": "下一页", "sLast": "末页", } }, "fnInitComplete": function() { this.fnAdjustColumnSizing(true); } }); jQuery('#style_pro_table .dataTables_filter input').addClass("form-control input-small"); // modify table search input jQuery('#style_pro_table .dataTables_length select').addClass("form-control input-small"); // modify table per page dropdown } ![图片说明](https://img-ask.csdn.net/upload/201504/20/1429541223_528312.png) ![图片说明](https://img-ask.csdn.net/upload/201504/20/1429541235_116837.png) 当我开启垂直滚动的时候我的表格标题就会被撑开-我尝试过很多办法-写在js里不行-写在页面里也不行-样式也不管用-总之只要是一打开垂直滚动-就会被撑开-求大牛
div中table100%宽度的浏览器兼容性问题
<p>先上代码,请看:</p> <p> </p> <pre name="code" class="html">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div style="width:300px;height:100px;overflow:auto;"&gt; &lt;table border="1" style="table-layout:fixed;width:100%;"&gt; &lt;tr&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;td&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p> </p> <p>这个例子的大意是给table外面套个div,如果table的高度过高,就显示一个垂直滚动条,而里面的table是100%宽度的</p> <p>据我观察,例子在IE8,FF,CHROME下能如预期般工作</p> <p>但是在IE6/7下面,div会显示出一个水平滚动条,因为IE6/7下面100%宽度是包含垂直滚动条的宽度的</p> <p>如果将table的width:100%样式拿掉,在IE6/7下工作就正常了,不过在其他浏览器下又不正常,这是因为对于table-layout:fixed的理解不同浏览器有差异</p> <p>这个问题太烦人了,不知道有没有好的解决办法</p><br/><strong>问题补充</strong><br/>目前我的方法是用CSS HACK <br />给table的样式加上个&gt;width:auto <br />这样在IE6/7下table的width就不是100%了 <br />不过这样的方法太丑陋了,不知道有啥好点的方法没<br/><strong>问题补充</strong><br/><div class="quote_title">zbm2001 写道</div><div class="quote_div">IE的老问题了,目前没有太好的解决方法,内嵌套一个分区元素 Layout一下吧 <br /> <br />&lt;div style="width:300px;height:100px;overflow:auto;"&gt; <br />&lt;div style="+zoom:1;"&gt; <br />&lt;table border="1" style="table-layout:fixed;width:100%;"&gt;&nbsp; <br />…… <br />&lt;/table&gt;&nbsp; <br />&lt;/div&gt; <br />&lt;/div&gt; </div> <br />这个不错,比CSS里面写HACK语法舒服点,非常感谢
请教一个问题,ext panel里面嵌套iframe大小问题
``` panel = new Ext.Panel({ id:'panel', frame : false, height:(document.body.clientHeight)/2, html :'<iframe id="chartFrame" src="" frameBorder=0 scrolling="auto" width="100%" height="100%"></iframe>' }); ``` 我在panel里面添加了一个iframe ,里面是一个jsp页面,table表单,如何使panel的高度与jsp的高度一样呀,不出现滚动条(超出屏幕部分出现滚动条,我的现在的效果是只显示一小部分,然后就出现滚动条,没有布满全屏),全部显示
谢谢各位,帮我看一下这个Table的问题
一个Table问题: 我的要求是表头不动 内容跟着滚动条动 已经搜到的结果是: 给Table加DIV,并给表头加样式如: tr { position:relative; background:#000; } 这样 拉动滚条 表头就不动了! 效果也达到了! 接下来引发了新问题: 当我的Table里有 <a>标签(我举个例子) 并给<a>标签加了样式 如:a.fontbutton{......} a.fontbutton:hover{......} a.fontbutton:active{......} <a href="#" class="fontbutton">详细</a> 这样当滚条滚动后,再碰<a>标签,表头就跑上面去了! 也就是表内容的样式一变,表头的位置就变了! 问题不知道描述清楚没有,这个问题我该怎么解决呢? [color=brown]十分谢谢各位!!![/color] HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Layout</title> <style type="text/css"> html,body { margin:0; font:12px/180% Verdana, Arial; text-align:center; } div { width:800px; height:100px; overflow-y:scroll; } table { border:none; } .id { width:200px; } .name { width:300px; } .age { width:300px; } thead tr { position:relative; background:#f0f0f0; } a.fontbutton{font-size:12px; color:#a65600;} a.fontbutton:hover{font-size:12px; font-weight:bold; color:#a65600;} a.fontbutton:active{font-size:12px; font-weight:bold; color:#a65600;} </style> </head> <body> <br> <div class="scrollbarface"> <table cellspacing="1" align="left"> <thead> <tr> <th class="id">ID</th> <th class="name">姓名</th> <th class="age">年龄</th> </tr> </thead> <tbody> <tr> <td>6</td> <td><a href="#" class="fontbutton">姓名</a></td> <td>32</td> </tr><tr> <td>6</td> <td><a href="#" class="fontbutton">姓名</a></td> <td>32</td> </tr><tr> <td>6</td> <td><a href="#" class="fontbutton">姓名</a></td> <td>32</td> </tr><tr> <td>6</td> <td><a href="#" class="fontbutton">姓名</a></td> <td>32</td> </tr><tr> <td>6</td> <td><a href="#" class="fontbutton">姓名</a></td> <td>32</td> </tr><tr> <td>6</td> <td><a href="#" class="fontbutton">姓名</a></td> <td>32</td> </tr><tr> <td>6</td> <td><a href="#" class="fontbutton">姓名</a></td> <td>32</td> </tr><tr> <td>6</td> <td><a href="#" class="fontbutton">姓名</a></td> <td>32</td> </tr><tr> <td>6</td> <td><a href="#" class="fontbutton">姓名</a></td> <td>32</td> </tr><tr> <td>6</td> <td><a href="#" class="fontbutton">姓名</a></td> <td>32</td> </tr> </tbody> </table> </div> </body> </html>
Kafka实战(三) - Kafka的自我修养与定位
Apache Kafka是消息引擎系统,也是一个分布式流处理平台(Distributed Streaming Platform) Kafka是LinkedIn公司内部孵化的项目。LinkedIn最开始有强烈的数据强实时处理方面的需求,其内部的诸多子系统要执行多种类型的数据处理与分析,主要包括业务系统和应用程序性能监控,以及用户行为数据处理等。 遇到的主要问题: 数据正确性不足 数据的收集主要...
volatile 与 synchronize 详解
Java支持多个线程同时访问一个对象或者对象的成员变量,由于每个线程可以拥有这个变量的拷贝(虽然对象以及成员变量分配的内存是在共享内存中的,但是每个执行的线程还是可以拥有一份拷贝,这样做的目的是加速程序的执行,这是现代多核处理器的一个显著特性),所以程序在执行过程中,一个线程看到的变量并不一定是最新的。 volatile 关键字volatile可以用来修饰字段(成员变量),就是告知程序任何对该变量...
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
有哪些让程序员受益终生的建议
从业五年多,辗转两个大厂,出过书,创过业,从技术小白成长为基层管理,联合几个业内大牛回答下这个问题,希望能帮到大家,记得帮我点赞哦。 敲黑板!!!读了这篇文章,你将知道如何才能进大厂,如何实现财务自由,如何在工作中游刃有余,这篇文章很长,但绝对是精品,记得帮我点赞哦!!!! 一腔肺腑之言,能看进去多少,就看你自己了!!! 目录: 在校生篇: 为什么要尽量进大厂? 如何选择语言及方...
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 free -m 其中:m表示兆,也可以用g,注意都要小写 Men:表示物理内存统计 total:表示物理内存总数(total=used+free) use...
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
GitHub开源史上最大规模中文知识图谱
近日,一直致力于知识图谱研究的 OwnThink 平台在 Github 上开源了史上最大规模 1.4 亿中文知识图谱,其中数据是以(实体、属性、值),(实体、关系、实体)混合的形式组织,数据格式采用 csv 格式。 到目前为止,OwnThink 项目开放了对话机器人、知识图谱、语义理解、自然语言处理工具。知识图谱融合了两千五百多万的实体,拥有亿级别的实体属性关系,机器人采用了基于知识图谱的语义感...
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发...
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 演示地点演示 html代码如下` music 这个年纪 七月的风 音乐 ` 然后就是css`*{ margin: 0; padding: 0; text-decoration: none; list-...
微信支付崩溃了,但是更让马化腾和张小龙崩溃的竟然是……
loonggg读完需要3分钟速读仅需1分钟事件还得还原到昨天晚上,10 月 29 日晚上 20:09-21:14 之间,微信支付发生故障,全国微信支付交易无法正常进行。然...
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。
数据库优化 - SQL优化
以实际SQL入手,带你一步一步走上SQL优化之路!
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 cpp 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7 p...
通俗易懂地给女朋友讲:线程池的内部原理
餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”
《奇巧淫技》系列-python!!每天早上八点自动发送天气预报邮件到QQ邮箱
将代码部署服务器,每日早上定时获取到天气数据,并发送到邮箱。 也可以说是一个小型人工智障。 知识可以运用在不同地方,不一定非是天气预报。
经典算法(5)杨辉三角
杨辉三角 是经典算法,这篇博客对它的算法思想进行了讲解,并有完整的代码实现。
英特尔不为人知的 B 面
从 PC 时代至今,众人只知在 CPU、GPU、XPU、制程、工艺等战场中,英特尔在与同行硬件芯片制造商们的竞争中杀出重围,且在不断的成长进化中,成为全球知名的半导体公司。殊不知,在「刚硬」的背后,英特尔「柔性」的软件早已经做到了全方位的支持与支撑,并持续发挥独特的生态价值,推动产业合作共赢。 而对于这一不知人知的 B 面,很多人将其称之为英特尔隐形的翅膀,虽低调,但是影响力却不容小觑。 那么,在...
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹...
面试官:你连RESTful都不知道我怎么敢要你?
干货,2019 RESTful最贱实践
刷了几千道算法题,这些我私藏的刷题网站都在这里了!
遥想当年,机缘巧合入了 ACM 的坑,周边巨擘林立,从此过上了"天天被虐似死狗"的生活… 然而我是谁,我可是死狗中的战斗鸡,智力不够那刷题来凑,开始了夜以继日哼哧哼哧刷题的日子,从此"读题与提交齐飞, AC 与 WA 一色 ",我惊喜的发现被题虐既刺激又有快感,那一刻我泪流满面。这么好的事儿作为一个正直的人绝不能自己独享,经过激烈的颅内斗争,我决定把我私藏的十几个 T 的,阿不,十几个刷题网...
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看...
白话阿里巴巴Java开发手册高级篇
不久前,阿里巴巴发布了《阿里巴巴Java开发手册》,总结了阿里巴巴内部实际项目开发过程中开发人员应该遵守的研发流程规范,这些流程规范在一定程度上能够保证最终的项目交付质量,通过在时间中总结模式,并推广给广大开发人员,来避免研发人员在实践中容易犯的错误,确保最终在大规模协作的项目中达成既定目标。 无独有偶,笔者去年在公司里负责升级和制定研发流程、设计模板、设计标准、代码标准等规范,并在实际工作中进行...
SQL-小白最佳入门sql查询一
不要偷偷的查询我的个人资料,即使你再喜欢我,也不要这样,真的不好;
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...
Nginx 原理和架构
Nginx 是一个免费的,开源的,高性能的 HTTP 服务器和反向代理,以及 IMAP / POP3 代理服务器。Nginx 以其高性能,稳定性,丰富的功能,简单的配置和低资源消耗而闻名。 Nginx 的整体架构 Nginx 里有一个 master 进程和多个 worker 进程。master 进程并不处理网络请求,主要负责调度工作进程:加载配置、启动工作进程及非停升级。worker 进程负责处...
YouTube排名第一的励志英文演讲《Dream(梦想)》
Idon’t know what that dream is that you have, I don't care how disappointing it might have been as you've been working toward that dream,but that dream that you’re holding in your mind, that it’s po...
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,...
程序员:我终于知道post和get的区别
是一个老生常谈的话题,然而随着不断的学习,对于以前的认识有很多误区,所以还是需要不断地总结的,学而时习之,不亦说乎
相关热词 c#委托 逆变与协变 c#新建一个项目 c#获取dll文件路径 c#子窗体调用主窗体事件 c# 拷贝目录 c# 调用cef 网页填表c#源代码 c#部署端口监听项目、 c#接口中的属性使用方法 c# 昨天
立即提问