ホームページ > 記事 > ウェブフロントエンド > Windows UIを模倣したHTMLテーブル。IEおよびfirefox_javascript技術と互換性があります。

Windows UIを模倣したHTMLテーブル。IEおよびfirefox_javascript技術と互換性があります。

WBOYオリジナル: 2016-05-16 18:58:071027ブラウズ

<title> Windows UI テーブル </title>
<meta name="author" content="DeltaCat@www.zu14.cn">
<meta name="keywords" content="table, css">
<meta name="description" content="windows ui table">

.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 src="sortup.gif"    style="max-width:90%"  style="max-width:90%" alt="Windows UIを模倣したHTMLテーブル。IEおよびfirefox_javascript技術と互換性があります。">
</td> 
    <td>列标题2</td> 
    <td>列标题3 <img src="sortdown.gif"    style="max-width:90%"  style="max-width:90%" alt="Windows UIを模倣したHTMLテーブル。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 を導入する必要がある場合は、を実行するために更新する必要があります]

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Js callBack は、前の page_javascript スキルの js メソッドを返します。次の記事：Js callBack は、前の page_javascript スキルの js メソッドを返します。

続きを見る

Windows UIを模倣したHTMLテーブル。IEおよびfirefox_javascript技術と互換性があります。

関連記事