table表格怎么样添加滚动条 表头不动,tbody滚动?

收藏
HTML/HTML5 CSS/CSS3
8
Mar 19, 2018

table表格怎么样添加滚动条 表头不动,tbody滚动?

回答

云松回答

问题分析:

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

问题解答:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>


<div>
  <table >
   <thead>
  <tr>
    <th>Header
      1</th>
    <th>Header
      2</th>
    <th>Header
      3</th>
   </tr></thead>
   <tr>
      <td> 1</td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> 2</td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> 3</td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> 4</td>
      <td> </td>
      <td> </td>
    </tr>
  </table>
</div>
</body>
</html>


<style type="text/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;
}


</style>

 

(0)

提交成功