table表格怎么樣添加滾動(dòng)條

精華

＆～靜 2016-11-01 11:37:42 瀏覽(17224) 回復(fù)(7) 贊(0)

表頭不動(dòng)，tbody滾動(dòng)

標(biāo)簽： html

回答(7)

卓別林 2016-11-02

表格放在Div中，設(shè)定Div的寬度和高度（不能用百分比），并設(shè)置縱向滾動(dòng)條始終顯示。
設(shè)定表格的寬度比Div小一個(gè)滾動(dòng)條的寬度（如Div寬度為500，滾動(dòng)條寬度為16，則表格的寬度應(yīng)該設(shè)置為500-16=484）。
表格采用 thead,th標(biāo)簽

范例：包括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>無標(biāo)題文檔</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;  /*縱向滾動(dòng)條始終顯示 */
  overflow-x:none;
 } 

 
 table {
  width:484px;   /*表格寬度＝div寬度(500px)－滾動(dòng)條寬度(16px) */
 }
thead tr {
 POSITION: relative;  TOP:0px;  /*絕對(duì)定位 */
 background:#cccccc;
}

 
tr {
 background:#222222;
}


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