一個仿Windows UI的html table，兼容IE和firefox

2019-11-21 01:32:37

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Windows UI Table </title> <meta name="author" content="http://m.survivalescaperooms.com/"/> <meta name="keywords" content="table, css" /> <meta name="description" content="windows ui table" /> </head> <style type="text/css"> td{font-size:12px;font-family: Verdana,tahoma} .winUI {     margin: 0 auto;     border: solid 1px #d4d0c8; } .winUI tr td, .winUI thead td, tfoot td {     border-left: 1px solid buttonhighlight;     border-top: 1px solid buttonhighlight;     border-bottom: 1px solid buttonshadow;     border-right: 1px solid buttonshadow; } .winUI thead td, tfoot td {     background-color: #ece9d8; cursor: pointer;     padding: 4px;     font-weight: bold; } </style> <body> <table cellpadding="4" cellspacing="0" border="1" class="winUI" width="500px"> <thead>     <td>列標題1 <img src="https://www.jb51.net/article/sortup.gif" width="25" height="11" alt="升序" /></td>     <td>列標題2</td>     <td>列標題3 <img src="https://www.jb51.net/article/sortdown.gif" width="25" height="11" alt="降序" /> </td>     <td>列標題4</td>     <td>列標題5</td> </thead> <tbody> <tr>     <td>test</td>     <td>good</td>     <td>nothing</td>     <td>OK</td>     <td>中文</td> </tr> <tr>     <td>price</td>     <td>ABC.COM</td>     <td>123.98</td>     <td>￥1023.98</td>     <td>嘿嘿</td> </tr> <tr>     <td>product</td>     <td>真有意思</td>     <td>2008-11-23</td>     <td>兩只老虎</td>     <td>不是吧</td> </tr> <tr>     <td>a</td>     <td>b</td>     <td>c</td>     <td>d</td>     <td>e</td> </tr> <tr>     <td>1</td>     <td>2</td>     <td>3</td>     <td>4</td>     <td>5</td> </tr> </tbody> <tfoot> <td colspan="5" style="text-align: right">共 5 行</td> </tfoot> </table> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：javascript 尚未實現錯誤解決辦法

下一篇：javascript replace()方法的簡單分析