table表格怎么样添加滚动条

精华

＆～静 2016-11-01 11:37:42 浏览(17147) 回复(7) 赞(0)

表头不动，tbody滚动

标签： html

回答(7)

卓别林 2016-11-02

表格放在Div中，设定Div的宽度和高度（不能用百分比），并设置纵向滚动条始终显示。
设定表格的宽度比Div小一个滚动条的宽度（如Div宽度为500，滚动条宽度为16，则表格的宽度应该设置为500-16=484）。
表格采用 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;
}


*************************************************************