table表头固定

时间  2019-11-18 标签 table 表头 固定

table表头固定(一)

2018年01月05日 16:55:07 小猫儿 阅读数：4419css

方法1：js实现
 

  1. <!DOCTYPE HTML>html

  2. <html>测试

  3. <head>ui

  4. <meta charset="utf-8"/>spa

  5. <title>table表头固定，不随竖向滚动条滚动，但随横向滚动条滚动</title>.net

  6. <style type="text/css">code

  7. *{htm

  8. margin:0;blog

  9. padding:0;事件

  10. }

  11. td, th{

  12. width:200px;

  13. line-height: 30px;

  14. text-align:center;

  15. }

  16. th {

  17. background-color: green;

  18. }

  19. td:first-child{

  20. background-color: yellow;

  21. }

  22. table{

  23. width:2000px;

  24. }

  25. #wrap{

  26. position:relative;

  27. }

  28. #topic{

  29. position:absolute;

  30. top:0;

  31. left:0;

  32. width:2000px;

  33. }

  34. </style>

  35.  
  36.  

  37. <script>

  38. var pre_scrollTop = 0; // 滚动条事件以前文档滚动高度

  39. var obj_topic ;

  40. window.onload = function(){

  41. pre_scrollTop = (document.documentElement.scrollTop || document.body.scrollTop);

  42. obj_topic = document.getElementById("topic");

  43. }

  44. window.onscroll = function(){

  45. if(pre_scrollTop != (document.documentElement.scrollTop || document.body.scrollTop)){

  46. pre_scrollTop = (document.documentElement.scrollTop || document.body.scrollTop);

  47. obj_topic.style.top = pre_scrollTop+"px";

  48. }

  49. }

  50. </script>

  51. </head>

  52.  
  53.  

  54. <body>

  55. <div id="wrap">

  56. <table cellpadding="0" cellspacing="0">

  57. <tr id="topic">

  58. <th>000</th>

  59. <th>001</th>

  60. <th>002</th>

  61. <th>003</th>

  62. <th>004</th>

  63. <th>005</th>

  64. <th>006</th>

  65. <th>007</th>

  66. <th>008</th>

  67. <th>009</th>

  68. </tr>

  69. <tr>

  70. <td>100</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  71. </tr>

  72. <tr>

  73. <td>101</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  74. </tr>

  75. <tr>

  76. <td>102</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  77. </tr>

  78. <tr>

  79. <td>103</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  80. </tr>

  81. <tr>

  82. <td>104</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  83. </tr>

  84. <tr>

  85. <td>105</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  86. </tr>

  87. <tr>

  88. <td>106</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  89. </tr>

  90. <tr>

  91. <td>107</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  92. </tr>

  93. <tr>

  94. <td>108</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  95. </tr>

  96. <tr>

  97. <td>109</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  98. </tr>

  99. <tr>

  100. <td>110</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  101. </tr>

  102. <tr>

  103. <td>111</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  104. </tr>

  105. <tr>

  106. <td>112</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  107. </tr>

  108. <tr>

  109. <td>113</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  110. </tr>

  111. <tr>

  112. <td>114</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  113. </tr>

  114. <tr>

  115. <td>115</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  116. </tr>

  117. <tr>

  118. <td>116</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  119. </tr>

  120. <tr>

  121. <td>117</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  122. </tr>

  123. <tr>

  124. <td>118</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  125. </tr>

  126. <tr>

  127. <td>119</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  128. </tr>

  129. <tr>

  130. <td>120</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  131. </tr>

  132. <tr>

  133. <td>121</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  134. </tr>

  135. <tr>

  136. <td>122</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  137. </tr>

  138. <tr>

  139. <td>123</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  140. </tr>

  141. <tr>

  142. <td>124</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  143. </tr>

  144. <tr>

  145. <td>125</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  146. </tr>

  147. <tr>

  148. <td>126</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  149. </tr>

  150. <tr>

  151. <td>127</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  152. </tr>

  153. <tr>

  154. <td>128</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  155. </tr>

  156. <tr>

  157. <td>129</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  158. </tr>

  159. <tr>

  160. <td>130</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  161. </tr>

  162. <tr>

  163. <td>131</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  164. </tr>

  165. <tr>

  166. <td>132</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  167. </tr>

  168. <tr>

  169. <td>133</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  170. </tr>

  171. <tr>

  172. <td>134</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  173. </tr>

  174. <tr>

  175. <td>135</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  176. </tr>

  177. <tr>

  178. <td>136</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  179. </tr>

  180. <tr>

  181. <td>137</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  182. </tr>

  183. <tr>

  184. <td>138</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  185. </tr>

  186. <tr>

  187. <td>139</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  188. </tr>

  189. <tr>

  190. <td>140</td><td>content1</td><td>content2</td><td>content3</td><td>content4</td><td>content5</td><td>content6</td><td>content7</td><td>content8</td><td>content9</td>

  191. </tr>

  192. </table>

  193. </div>

  194. </body>

  195. </html>

效果：

方法二：css样式实现（推荐，较简单！！！！！！！！！！！！！！！！！！！）

 
 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3.  

  4. <head>

  5. <meta charset="UTF-8">

  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">

  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">

  8. <title>Document</title>

  9. <style>

  10. table tbody {

  11. display: block;

  12. height: 200px;

  13. overflow-y: scroll;

  14. }

  15.  

  16. table thead,

  17. table tbody tr {

  18. display: table;

  19. width: 100%;

  20. table-layout: fixed;

  21. text-align: center;

  22. }

  23.  

  24. thead th,

  25. tbody td {

  26. width: 50px;

  27. }

  28.  

  29. table thead {

  30. width: calc( 100% - 1em);

  31. }

  32. </style>

  33. </head>

  34.  

  35. <body>

  36. <div style="width: 800px;">

  37. <div class="table-head">

  38. <table align="center">

  39. <thead>

  40. <tr>

  41. <th>序号</th>

  42. <th>内容</th>

  43. </tr>

  44. </thead>

  45. <tbody>

  46. <tr>

  47. <td>1</td>

  48. <td>我只是用来测试的</td>

  49. </tr>

  50. <tr>

  51. <td>2</td>

  52. <td>我只是用来测试的</td>

  53. </tr>

  54. <tr>

  55. <td>3</td>

  56. <td>我只是用来测试的</td>

  57. </tr>

  58. <tr>

  59. <td>4</td>

  60. <td>我只是用来测试的</td>

  61. </tr>

  62. <tr>

  63. <td>5</td>

  64. <td>我只是用来测试的</td>

  65. </tr>

  66. <tr>

  67. <td>6</td>

  68. <td>我只是用来测试的</td>

  69. </tr>

  70. <tr>

  71. <td>7</td>

  72. <td>我只是用来测试的</td>

  73. </tr>

  74. <tr>

  75. <td>8</td>

  76. <td>我只是用来测试的</td>

  77. </tr>

  78. </tbody>

  79. </table>

  80. </div>

  81. </div>

  82. </body>

  83.  

  84. </html>

 

 
效果图：

联系我们 沪ICP备13005482号-10