【css布局题】 给表格加滚动条（有图有素材）

priestmoon 2010-04-09 04:18:45
没有加滚动条的表格看起来是下面的样子





加了滚动条的表格看起来是下面的样子




要求：
① 第一列（empno）固定，不受水平滚动条影响。
② 表头不受垂直滚动条影响，但除第一列以外的列（含表头）受水平滚动条控制。
③ 记录显示数恒等于5条。
...全文
1808 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
wwwzengyi 2010-08-20
  • 打赏
  • 举报
 回复
<HTML>
<HEAD>
<TITLE>Scrol table sample</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Author" CONTENT="51windows,??,haiwa">
<META NAME="Description" CONTENT="Power by 51windows.Net">
</HEAD>

<BODY>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3"/>
<div id="wins" style="height:200;width:100%;overflow:auto;background:#EEEEEE;">
<table border="1" cellpadding="0" cellspacing="0">
<tr class="heading">
<td>empno</td>
<td>ename</td>
<td>job</td>
<td>manager</td>
<td>hiredate</td>
<td>salary</td>
<td>commit</td>
<td>deptno</td>
<td>dname</td>
</tr>
<tr>
<td>7000</td>
<td>Tom</td>
<td>clerk</td>
<td>7001</td>
<td>2001/1/1</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7001</td>
<td>Jack</td>
<td>salesman</td>
<td>7002</td>
<td>2001/1/2</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7002</td>
<td>Addison</td>
<td>clerk</td>
<td>7003</td>
<td>2001/1/3</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7003</td>
<td>Frank</td>
<td>salesman</td>
<td>7004</td>
<td>2001/1/4</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7004</td>
<td>Robin</td>
<td>accounting</td>
<td>7005</td>
<td>2001/1/5</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7000</td>
<td>Tom</td>
<td>clerk</td>
<td>7001</td>
<td>2001/1/1</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7001</td>
<td>Jack</td>
<td>salesman</td>
<td>7002</td>
<td>2001/1/2</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7002</td>
<td>Addison</td>
<td>clerk</td>
<td>7003</td>
<td>2001/1/3</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7003</td>
<td>Frank</td>
<td>salesman</td>
<td>7004</td>
<td>2001/1/4</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
<tr>
<td>7004</td>
<td>Robin</td>
<td>accounting</td>
<td>7005</td>
<td>2001/1/5</td>
<td>1000</td>
<td>500</td>
<td>10</td>
<td>Unknown</td>
</tr>
</table>
</div>
<td valign="top"><span onmouseover='scrollb=setInterval("wins.scrollLeft-=10",100)' onmouseout=clearInterval(scrollb)></span> <span onmouseover='scrollb=setInterval("wins.scrollTop-=10",100)' onmouseout=clearInterval(scrollb)></span></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td valign="bottom"><span onmouseover='scrollb=setInterval("wins.scrollLeft+=10",100)' onmouseout=clearInterval(scrollb)></span> <span onmouseover='scrollb=setInterval("wins.scrollTop+=10",100)' onmouseout=clearInterval(scrollb)></span></td>
</tr>
</table>
</BODY>
</HTML>
app_code 2010-04-14
  • 打赏
  • 举报
 回复
<html>
<head>
<title>页面滚动条</title>
<style>
<!--
body{ /* 页面滚动条 */
background-color:#efe5e2;
scrollbar-3dlight-color: #B0C4DE;
scrollbar-arrow-color: #34547E;
scrollbar-base-color: #FF0000; /* 基调颜色 */
scrollbar-darkshadow-color: #1D4272;
scrollbar-face-color: #CFDFF4;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #5380BA;
}
.largetext { /* 文本框滚动条 */
scrollbar-3dlight-color: #B0C4DE;
scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #8BA9CF;
scrollbar-darkshadow-color: #436DA3;
scrollbar-face-color: #34547E;
scrollbar-highlight-color: #E6ECF4;
scrollbar-shadow-color: #000000;
}
-->
</style>
</head>
<body>
<textarea rows="6" cols="50" class="largetext">
表格内容
</textarea>
</body>
</html>
zkyy66 2010-04-14
  • 打赏
  • 举报
 回复
你试试code
priestmoon 2010-04-14
  • 打赏
  • 举报
 回复
still waiting……
priestmoon 2010-04-12
  • 打赏
  • 举报
 回复
waiting……
priestmoon 2010-04-11
  • 打赏
  • 举报
 回复
空谈无用，代码才是硬道理！
惜分飞 2010-04-10
  • 打赏
  • 举报
 回复
一个table不能实现，采用上面和第一列为div或者另外的table可以实现
把要有滚动条的table放到一个div里面，然后设置div的css为固定的宽和高，然后overflow:scroll应该可以，你尝试下
priestmoon 2010-04-10
  • 打赏
  • 举报
 回复
楼上就不要发无用的参考资料了。
一句话，能给出代码解决问题的，30分就归您！
jonas 2010-04-09
  • 打赏
  • 举报
 回复
http://www.diysys.com有很多关于php，mysql，js，css的信息,适合新手和进阶者
mykelly6 2010-04-09
  • 打赏
  • 举报
 回复
参考cloudgamer大神的博客
priestmoon 2010-04-09
  • 打赏
  • 举报
 回复
素材HTML：





<html>

<head>

    <title></title>

    <style type="text/css">

        table,td {border:solid 1px black; border-collapse:collapse; text-align:center;}

        .heading { font-weight:bold; color:red; background-color:#FFFF99;}

    </style>

</head>

<body>

    <table cellpadding="2" cellspacing="0">

        <tr class="heading">

            <td>empno</td>

            <td>ename</td>

            <td>job</td>

            <td>manager</td>

            <td>hiredate</td>

            <td>salary</td>

            <td>commit</td>

            <td>deptno</td>

            <td>dname</td>

        </tr>

        <tr>

            <td>7000</td>

            <td>Tom</td>

            <td>clerk</td>

            <td>7001</td>

            <td>2001/1/1</td>

            <td>1000</td>

            <td>500</td>

            <td>10</td>

            <td>Unknown</td>

        </tr>

        <tr>

            <td>7001</td>

            <td>Jack</td>

            <td>salesman</td>

            <td>7002</td>

            <td>2001/1/2</td>

            <td>1000</td>

            <td>500</td>

            <td>10</td>

            <td>Unknown</td>

        </tr>

        <tr>

            <td>7002</td>

            <td>Addison</td>

            <td>clerk</td>

            <td>7003</td>

            <td>2001/1/3</td>

            <td>1000</td>

            <td>500</td>

            <td>10</td>

            <td>Unknown</td>

        </tr>

        <tr>

            <td>7003</td>

            <td>Frank</td>

            <td>salesman</td>

            <td>7004</td>

            <td>2001/1/4</td>

            <td>1000</td>

            <td>500</td>

            <td>10</td>

            <td>Unknown</td>

        </tr>

        <tr>

            <td>7004</td>

            <td>Robin</td>

            <td>accounting</td>

            <td>7005</td>

            <td>2001/1/5</td>

            <td>1000</td>

            <td>500</td>

            <td>10</td>

            <td>Unknown</td>

        </tr>

        <tr>

            <td>7000</td>

            <td>Tom</td>

            <td>clerk</td>

            <td>7001</td>

            <td>2001/1/1</td>

            <td>1000</td>

            <td>500</td>

            <td>10</td>

            <td>Unknown</td>

        </tr>

        <tr>

            <td>7001</td>

            <td>Jack</td>

            <td>salesman</td>

            <td>7002</td>

            <td>2001/1/2</td>

            <td>1000</td>

            <td>500</td>

            <td>10</td>

            <td>Unknown</td>

        </tr>

        <tr>

            <td>7002</td>

            <td>Addison</td>

            <td>clerk</td>

            <td>7003</td>

            <td>2001/1/3</td>

            <td>1000</td>

            <td>500</td>

            <td>10</td>

            <td>Unknown</td>

        </tr>

        <tr>

            <td>7003</td>

            <td>Frank</td>

            <td>salesman</td>

            <td>7004</td>

            <td>2001/1/4</td>

            <td>1000</td>

            <td>500</td>

            <td>10</td>

            <td>Unknown</td>

        </tr>

        <tr>

            <td>7004</td>

            <td>Robin</td>

            <td>accounting</td>

            <td>7005</td>

            <td>2001/1/5</td>

            <td>1000</td>

            <td>500</td>

            <td>10</td>

            <td>Unknown</td>

        </tr>

    </table>

</body>

</html>
bhbhxy 2010-04-09
  • 打赏
  • 举报
 回复
坐等高手
html如何让条数按序号输出,div css行数实现 css显示行数序列值布局
div css布局中常常遇到文章标题列表前有序号(1-10)排版布局，如何简单实现这类新闻文章标题列表排版布局呢？如看到列表布局前有1 2 3 4 5 6 7等数字顺序。类似带有序布局效果图一、布局思维讲解可能遇到这样的布局第...
用DIV+CSS技术设计的西安旅游网站18页（web前端网页制作课作业）HTML+CSS旅游网站设计与实现
‍静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计‍，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划...
CSS定位布局及溢出
定位： CSS定位（position）属性允许你自由设定元素的位置。...CSS有三种基本的定位机制：普通流，浮动和绝对定位。 position定位 position:static 静止定位 元素默认状态 position:absolute 绝对定位 相对...
web前端期末大作业——HTML+CSS简单的旅游网页设计与实现
‍静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计‍，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划...
div css布局大全——关于城市旅游的HTML网页设计 HTML+CSS上海博物馆网站 html网页制作期末大作业
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上...
CSS

61,116

社区成员

60,728

社区内容

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

加载中

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

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

+ 用AI写文章