如何设定html的table头部是固定不变的,我看网上有用css的expression来设定,但是IE8以后css不让用了

JavaScript015

如何设定html的table头部是固定不变的,我看网上有用css的expression来设定,但是IE8以后css不让用了,第1张

这种固定导航的效果,很多电商例如淘宝,都会有。

我说说他们的实现方法。

一,js算scroll的高度,就是滚动条滚了多高。

二,算悬浮的导航距离顶部的高度。

三,window的时候,对比这两个高度,如果一大于二,那么导航加个fixed。(IE7以上都有效)

然后用js处理下IE6就行。

建议去搜下相关js代码,我一般都用jQuery写。

你想要的table的头部也是一个道理,但是thead没办法fixed吧?

所以弄2个table吧,1个table放头部内容,1个table放具体内容。

另外,expression慎用,消耗浏览器资源不是一点两点。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title></title>

<style>

table, th , td {

border: 1px solid grey

border-collapse: collapse

padding: 5px

}

table tr:nth-child(odd) {

background-color: #f1f1f1

}

table tr:nth-child(even) {

background-color: #ffffff

}

</style>

</head>

<body>

我的笔记

<div ng-app="myTodoApp" ng-controller="myTodoCtrl">

<table>

<tr ng-repeat="two in twonames">

<td style="position: fixedbackground-color: #ccc height: 47px">{{two.Name}}</td>

<td>{{ two.Country }}</td>

<td>{{two.Name}}</td>

<td>{{ two.Country }}</td>

<td>{{two.Name}}</td>

<td>{{ two.Country }}</td>

<td>{{two.Name}}</td>

<td>{{ two.Country }}</td>

<td>{{two.Name}}</td>

<td>{{ two.Country }}</td>

<td>{{two.Name}}</td>

<td>{{ two.Country }}</td>

<td>{{two.Name}}</td>

<td>{{ two.Country }}</td>

<td>{{two.Name}}</td>

<td>{{ two.Country }}</td>

<td>{{two.Name}}</td>

<td>{{ two.Country }}</td>

<td>{{two.Name}}</td>

<td>{{ two.Country }}</td>

<td>{{two.Name}}</td>

<td>{{ two.Country }}</td>

<td>{{two.Name}}</td>

<td>{{ two.Country }}</td>

<td>{{two.Name}}</td>

<td>{{ two.Country }}</td>

<td>{{two.Name}}</td>

<td>{{ two.Country }}</td>

</tr>

</table>

</div>

</body>

<script src="angular.min.js" type="text/javascript"></script>

<script src="myTodoApp.js"></script>

<script src="myTodoCtrl.js"></script>

</html>

myTodoApp.js:

JavaScript code

?

1

var app = angular.module("myTodoApp",[])

myTodoCtrl.js:

app.controller("myTodoCtrl",function($scope){

$scope.message=""

$scope.firstnames=[{"Name" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},{"Name" : "Berglunds snabbköp","City" : "Luleå","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","City" : "México D.F.","Country" : "Mexico"},{"Name" : "Ernst Handel","City" : "Graz","Country" : "Austria"},{"Name" : "FISSA Fabrica Inter. Salchichas S.A.","City" : "Madrid","Country" : "Spain"},{"Name" : "Galería del gastrónomo","City" : "Barcelona","Country" : "Spain"}]

$scope.twonames=[{"Name" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},{"Name" : "Berglunds snabbköp","City" : "Luleå","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","City" : "México D.F.","Country" : "Mexico"},{"Name" : "Ernst Handel","City" : "Graz","Country" : "Austria"},{"Name" : "FISSA Fabrica Inter. Salchichas S.A.","City" : "Madrid","Country" : "Spain"},{"Name" : "Galería del gastrónomo","City" : "Barcelona","Country" : "Spain"},{"Name" : "Island Trading","City" : "Cowes","Country" : "UK"},{"Name" : "Königlich Essen","City" : "Brandenburg","Country" : "Germany"},{"Name" : "Laughing Bacchus Wine Cellars","City" : "Vancouver","Country" : "Canada"},{"Name" : "Magazzini Alimentari Riuniti","City" : "Bergamo","Country" : "Italy"},{"Name" : "North/South","City" : "London","Country" : "UK"},{"Name" : "Paris spécialités","City" : "Paris","Country" : "France"},{"Name" : "Rattlesnake Canyon Grocery","City" : "Albuquerque","Country" : "USA"},{"Name" : "Simons bistro","City" : "København","Country" : "Denmark"},{"Name" : "The Big Cheese","City" : "Portland","Country" : "USA"},{"Name" : "Vaffeljernet","City" : "Århus","Country" : "Denmark"},{"Name" : "Wolski Zajazd","City" : "Warszawa","Country" : "Poland"}]

$scope.left=function(){ return 100- $scope.message.length}

$scope.clear=function(){$scope.message=""}

$scope.save = function(){$scope.message=""}

})

基本效果就是这样