`

HTML如何给table添加滚动条

阅读更多

要给table添加滚动条其实很简单,主要是给table放到一个div里去,然后再设置div显示滚动条即可。示例代码如下所示:

 <!--div比table大小要小才会显示-->
 <div style="overflow-x: auto; overflow-y: auto; height: 100px; width:200px;">
    <table id="table" border="1" align="center" width="300px" height="200px">
  <tbody>
   <tr><td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td></tr>
   <tr><td>10</td><td>11</td><td>12</td><td>13</td><td>15</td><td>15</td></tr>
   <tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
   <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>
  </tbody>
 </table>
  </body>
  </div>

 

分享到:
评论

相关推荐

    jQuery table scroll表格插件内容部分加滚动条

    jQuery table scroll表格插件内容部分加滚动条

    jQuery.table_scroll插件将垂直和水平滚动条添加到HTML表格元素。-JavaScript开发

    Table Scroll在这里尝试-http://volodymyr-bobko.github.io/table-scroll/ jQuery.table_scroll插件将垂直和水平滚动条添加到HTML表格元素中。 具有垂直滚动功能。 水平滚动可能会窥视表格滚动在这里尝试-...

    给DIV添加滚动条的实现代码

    如果要出现水平滚动条,则: overflow-x:auto同理,垂直滚动条为: overflow-y:auto如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative  例如: &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;...

    实例讲解DataTables固定表格宽度(设置横向滚动条)

    默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width=”100%”,至于css的100%为什么不生效,原因未知。 下面就说说设置如何给datatables设置固定的宽度。 1、html代码 &lt;table id=userTable class=...

    表格自适应手机页面

    表格自适应手机站,给父元素添加.table-responsive类,这样宽度不会变,超出的会出现横向滚动条。互联网上最合适的表格自适应布局,你值得拥有。

    从入门到精通HTML5——PDF——网盘链接

     7.1.1 表格的基本构成——table、tr、td 119  7.1.2 表格的标题——caption 120  7.1.3 表格的表头——th 121  7.2 设置表格基本属性 123  7.2.1 表格的宽度——width 123  7.2.2 表格的高度——height...

    JavaScript完全自学宝典 源代码

    9.9.html 使用输入对话框修改table的值。 9.10.html 按照要求打开新窗口。 9.11.html 设定重复执行的延时程序。 top.html 框架定义与多框架分离页面时使用的框架头部页面。 left.html 多框架...

    HTML开发王

    11.2.4 滚动条设置 11.2.5 改变框架窗口大小 11.2.6 框架的描述(title属性、longdesc属性) 11.3 使用目标框架(name属性和target属性) 11.3.1 设置链接默认的目标 11.3.2 目标的优先级 11.3.3 名称和框架标识 11.4 ...

    html入门到放弃笔记

    作用:在页面中表现为一条直线 语法: 属性: 1、size 尺寸,以 px 为单位的数值 2、width 宽度,以 px 或 % 为单位的数值 3、align 水平对其方式 4、color 颜色 Demo : 02-text.html 中 增加一根...

    [WordPress插件]代码高亮插件CodeColorer汉化升级版2012.5.27

    lines (integer) –指定代码块显示的行数,当值设置为-1时,不出现纵向滚动条,可在设置界面更改。 width (integer or string) – 代码块宽度,可在设置界面更改。 height (integer or string) – 代码块高度,当这...

    CodeColorer0.9.9蓝飞汉化升级版

    lines (integer) –指定代码块显示的行数,当值设置为-1时,不出现纵向滚动条,可在设置界面更改。 width (integer or string) – 代码块宽度,可在设置界面更改。 height (integer or string) – 代码块高度,当这...

    WordPress代码高亮插件CodeColorer汉化升级版

    lines (integer) –指定代码块显示的行数,当值设置为-1时,不出现纵向滚动条,可在设置界面更改。 width (integer or string) – 代码块宽度,可在设置界面更改。 height (integer or string) – 代码块高度,当...

    《程序天下:JavaScript实例自学手册》光盘源码

    17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...

    程序天下:JavaScript实例自学手册

    17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...

    34款经典Dreamweaver插件

    设置IE滚动条属性(可应用于整个站点,IE4以上支持) Swap Flash 类别:DW Behavior 文件格式:mxp 像轮换图片一样轮换Flash 动画 Disable View Source Code 类别:DW Command 文件格式:mxp 禁止用户通过...

    C#开发经验技巧宝典

    第10章 Web页面设计 221 10.1 网页外观设计 222 0396 将CSS样式表应用到页面中 222 0397 在页面的源码中直接定义...0495 如何实现带滚动条的Panel面板 290 0496 使用Substitution控件在缓存页面插入内容 290

    jQuery详细教程

    当我们在教程中演示 jQuery 时,会将函数直接添加到 &lt;head&gt; 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件): 实例 &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/...

    C#编程经验技巧宝典

    8 &lt;br&gt;0018 有效利用Visual Studio 2005附带程序 8 &lt;br&gt;0019 有效使用MSDN帮助 9 &lt;br&gt;0020 如何设置MSDN帮助 9 &lt;br&gt;1.4 其他 10 &lt;br&gt;0021 如何添加项目引用 10 &lt;br&gt;0022 如何添加Web...

Global site tag (gtag.js) - Google Analytics