话题 首页 > HTML教程 > HTML教程话题列表 > 详情

table表格怎么样添加滚动条

精华
&~静 2016-11-01 11:37:42 浏览(9009) 回复(7) 赞(0)

表头不动,tbody滚动

html

回答(7)

卓别林 2016-11-02
  1. 表格放在Div中,设定Div的宽度和高度(不能用百分比),并设置纵向滚动条始终显示。
  2. 设定表格的宽度比Div小一个滚动条的宽度(如Div宽度为500,滚动条宽度为16,则表格的宽度应该设置为500-16=484)。
  3. 表格采用 thead,th标签

范例:包括html文件和css文件

《test.html》:
/*************************************************************

<!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>
<link href="css_table/css1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
  <table >
   <thead>
  <tr>
    <th>Header
      1</th>
    <th>Header
      2</th>
    <th>Header
      3</th>
   </tr></thead>
   <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
  </table>
</div>
</body>
</html>

*************************************************************/

《css1.css》
*************************************************************
div {
  width:500px;
  height:100px;
  overflow-y:scroll;  /*纵向滚动条始终显示 */
  overflow-x:none;
 } 

 table {
  width:484px;   /*表格宽度=div宽度(500px)-滚动条宽度(16px) */
 }
thead tr {
 POSITION: relative;  TOP:0px;  /*绝对定位 */
 background:#cccccc;
}

tr {
 background:#222222;
}

*************************************************************
OVO 2016-12-13

你需要定义宽度和高度。这样它超过了这个宽高才会出现滚动··

财神爷 2017-06-07

表示看不懂 还没有学到后面的div

PHP群157531900 2018-01-09

用div的形式,这样的好处就是你的表可以不断的循环,让数据列到div中

一笔荒芜 2018-05-31

有同样等问题咋解决,只能慢慢等大神啦.留名留名。。

1144100656 2018-05-31

好慢呀,空空如也,半天不来大神解决,大佬在哪啦

1152696398 2018-05-31

刚学习程序,过来学习学习!!!!...

要回复,请先登录 或者注册
二维码
建议反馈
APP下载