首页 > 代码库 > html bootstrap 表头固定在顶部，表列 可以自由滚动的效果
html bootstrap 表头固定在顶部，表列 可以自由滚动的效果
该效果主要是依照 bootstrap 的一个样式，class="navbar-fixed-top";
参考网址为：http://v3.bootcss.com/components/#navbar-fixed-top
贴上代码。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script type="text/javascript" src="js/jquery2.0.3.min.js"></script> 7 <script type="text/javascript" src="js/bootstrap.min.js"></script> 8 <link rel="stylesheet" href="css/bootstrap.min.css"> 9 <link rel="stylesheet" href="css/bootstrap-theme.min.css"> 10 <style> 11 .table tr th,.table tr td{ width:25% !important;} 12 </style> 13 </head> 14 15 <body> 16 <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 17 <div class="container"> 18 <table class="table table-bordered" style="margin-top:9px;"> 19 <tr> 20 <th>dksliesjfd</th> 21 <th>dksliesjfd</th> 22 <th>dksliesjfd</th> 23 <th>dksliesjfd</th> 24 </tr> 25 </table> 26 </div> 27 </nav> 28 <div class="container" style="margin-top:80px;"> 29 <table class="table table-bordered"> 30 <tr> 31 <td>dksliesjfd dsdsdsliesjfd dsdsdssliesjfd dsdsdssliesjfd dsdsdssd</td> 32 <td>时光深处，岁月静好.时光深处，岁月静好.时光深处，岁月静好.</td> 33 <td>dksliesjfd</td> 34 <td>dksliesjfd</td> 35 </tr> 36 <tr> 37 <td>dksliesjfd</td> 38 <td>dksliesjfd</td> 39 <td>dksliesjfd</td> 40 <td>dksliesjfd</td> 41 </tr> 42 <tr> 43 <td>dksliesjfd</td> 44 <td>dksliesjfd</td> 45 <td>dksliesjfd</td> 46 <td>dksliesjfd</td> 47 </tr> 48 <tr> 49 <td>dksliesjfd</td> 50 <td>dksliesjfd</td> 51 <td>dksliesjfd</td> 52 <td>dksliesjfd</td> 53 </tr> 54 <tr> 55 <td>dksliesjfd</td> 56 <td>dksliesjfd</td> 57 <td>dksliesjfd</td> 58 <td>dksliesjfd</td> 59 </tr> 60 <tr> 61 <td>dksliesjfd</td> 62 <td>dksliesjfd</td> 63 <td>dksliesjfd</td> 64 <td>dksliesjfd</td> 65 </tr> 66 <tr> 67 <td>dksliesjfd</td> 68 <td>dksliesjfd</td> 69 <td>dksliesjfd</td> 70 <td>dksliesjfd</td> 71 </tr> 72 <tr> 73 <td>dksliesjfd</td> 74 <td>dksliesjfd</td> 75 <td>dksliesjfd</td> 76 <td>dksliesjfd</td> 77 </tr> 78 <tr> 79 <td>dksliesjfd</td> 80 <td>dksliesjfd</td> 81 <td>dksliesjfd</td> 82 <td>dksliesjfd</td> 83 </tr> 84 <tr> 85 <td>dksliesjfd</td> 86 <td>dksliesjfd</td> 87 <td>dksliesjfd</td> 88 <td>dksliesjfd</td> 89 </tr> 90 <tr> 91 <td>dksliesjfd</td> 92 <td>dksliesjfd</td> 93 <td>dksliesjfd</td> 94 <td>dksliesjfd</td> 95 </tr> 96 <tr> 97 <td>dksliesjfd</td> 98 <td>dksliesjfd</td> 99 <td>dksliesjfd</td>100 <td>dksliesjfd</td>101 </tr>102 <tr>103 <td>dksliesjfd</td>104 <td>dksliesjfd</td>105 <td>dksliesjfd</td>106 <td>dksliesjfd</td>107 </tr>108 <tr>109 <td>dksliesjfd</td>110 <td>dksliesjfd</td>111 <td>dksliesjfd</td>112 <td>dksliesjfd</td>113 </tr>114 <tr>115 <td>dksliesjfd</td>116 <td>dksliesjfd</td>117 <td>dksliesjfd</td>118 <td>dksliesjfd</td>119 </tr>120 <tr>121 <td>dksliesjfd</td>122 <td>dksliesjfd</td>123 <td>dksliesjfd</td>124 <td>dksliesjfd</td>125 </tr><tr>126 <td>dksliesjfd</td>127 <td>dksliesjfd</td>128 <td>dksliesjfd</td>129 <td>dksliesjfd</td>130 </tr>131 <tr>132 <td>dksliesjfd</td>133 <td>dksliesjfd</td>134 <td>dksliesjfd</td>135 <td>dksliesjfd</td>136 </tr>137 <tr>138 <td>dksliesjfd</td>139 <td>dksliesjfd</td>140 <td>dksliesjfd</td>141 <td>dksliesjfd</td>142 </tr>143 <tr>144 <td>dksliesjfd</td>145 <td>dksliesjfd</td>146 <td>dksliesjfd</td>147 <td>dksliesjfd</td>148 </tr><tr>149 <td>dksliesjfd</td>150 <td>dksliesjfd</td>151 <td>dksliesjfd</td>152 <td>dksliesjfd</td>153 </tr>154 <tr>155 <td>dksliesjfd</td>156 <td>dksliesjfd</td>157 <td>dksliesjfd</td>158 <td>dksliesjfd</td>159 </tr>160 <tr>161 <td>dksliesjfd</td>162 <td>dksliesjfd</td>163 <td>dksliesjfd</td>164 <td>dksliesjfd</td>165 </tr>166 <tr>167 <td>dksliesjfd</td>168 <td>dksliesjfd</td>169 <td>dksliesjfd</td>170 <td>dksliesjfd</td>171 </tr>172 173 <tr>174 <td>dksliesjfd</td>175 <td>dksliesjfd</td>176 <td>dksliesjfd</td>177 <td>dksliesjfd</td>178 </tr>179 <tr>180 <td>dksliesjfd</td>181 <td>dksliesjfd</td>182 <td>dksliesjfd</td>183 <td>dksliesjfd</td>184 </tr>185 <tr>186 <td>dksliesjfd</td>187 <td>dksliesjfd</td>188 <td>dksliesjfd</td>189 <td>dksliesjfd</td>190 </tr>191 <tr>192 <td>dksliesjfd</td>193 <td>dksliesjfd</td>194 <td>dksliesjfd</td>195 <td>dksliesjfd</td>196 </tr>197 <tr>198 <td>dksliesjfd</td>199 <td>dksliesjfd</td>200 <td>dksliesjfd</td>201 <td>dksliesjfd</td>202 </tr>203 <tr>204 <td>dksliesjfd</td>205 <td>dksliesjfd</td>206 <td>dksliesjfd</td>207 <td>dksliesjfd</td>208 </tr>209 <tr>210 <td>dksliesjfd</td>211 <td>dksliesjfd</td>212 <td>dksliesjfd</td>213 <td>dksliesjfd</td>214 </tr>215 <tr>216 <td>dksliesjfd</td>217 <td>dksliesjfd</td>218 <td>dksliesjfd</td>219 <td>dksliesjfd</td>220 </tr>221 </table>222 </div>223 </body>224 </html>
还有一种方法，是 position:fixed; top:0;也是可以固定在顶部。
但是，bootstrap 可以自适应网页，简单快捷。
html bootstrap 表头固定在顶部，表列 可以自由滚动的效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。