一个仿Windows UI的html table，兼容IE和firefox_javascript技巧

程序员文章站 2022-03-26 18:53:11

...

一个仿Windows UI的html table，兼容IE和firefox_javascript技巧

.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>
<table cellpadding="4" cellspacing="0" border="1" class="winUI" width="500px">
<thead>
<td>列标题1 <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=c29ydHVwLmdpZg==" alt="一个仿Windows UI的html table，兼容IE和firefox_javascript技巧" title="一个仿Windows UI的html table，兼容IE和firefox_javascript技巧">
</td> 
    <td>列标题2</td> 
    <td>列标题3 <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=c29ydGRvd24uZ2lm" alt="一个仿Windows UI的html table，兼容IE和firefox_javascript技巧" title="一个仿Windows UI的html table，兼容IE和firefox_javascript技巧">
</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>

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