一个table ui

下午参照lukew的ui做了个table

本来想实现类似phpmyadmin的显示样式，可以当前行高亮并可以做标记，不过没找到很好的实现方法。 hover目前支持ie7和firefox

点击查看table ui

body { margin:0; padding:0; FONT: 11px auto “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif; color:#666; } a:link { color:#33CCFF; } a:visited { color:#3399FF; } a:hover { color:#FF33FF; } a:active { color:#FF33FF; } .DataSheet { table-layout:fixed; /*auto | fixed*/ overflow:hidden; /*firefox*/ padding:0; margin:0; border-collapse :collapse;/* separate | collapse*/ width:700px; } .DataSheet caption { border-top:1px solid #c1dad7; border-left:1px solid #c1dad7; border-right:1px solid #c1dad7; padding:6px; padding-left:12px; background:#5265B5; text-align:left; color:#DEEBFF; font-weight:bold; } .DataSheet th { border:1px solid #c1dad7; padding:6px; padding-left:6px; background:#FFF7DE; color:#393410; text-align:left; } .DataSheet tr { background:#FFF; } .DataSheet td { border:1px solid #c1dad7; padding:6px; } .DataSheet tr.Odd { background:#FFFFFF; } .DataSheet tr.Event { background:#F7FBFF; } .DataSheet tr.OddMarked { background:#CEEBEF; } .DataSheet tr.EventMarked { background:#CEEBEF; } table.DataSheet tr:hover { background:#F7FBFF; } function markRow(elm){ var className = elm.className; if ((/Marked/).test(elm.className)) { elm.className = className.replace(/Marked/,”); }else{ elm.className = className+’Marked’; } }

List

ID	Name	Date	Operation
1	afffffsafdasdfasdasdgasdgasdg	2007-1-26	saffff
2		2007-1-26	link
3	c	2007-1-26	wqr
4	d	2007-1-26	wqr