PHP & JavaScript Room :: 設置サンプル

CSSレイアウト：見出し

実行結果

順位
ユーザーOS
割合
アクセス数
1
Windows XP
76.2%
59,918
2
Windows 2000
15.3%
12,056
3
Macintosh
4.8%
3,847
4
Windows 98
0.8%
704
5
Linux
0.8%
696
6
Windows ME
0.6%
474
7
Windows NT 5.2
0.5%
396
8
-AskJeevesJapan
0.2%
176
9
Windows 3.x
0.1%
 
10
Windows NT
0.1%
101
*
その他少数派(57件)
0.2%
175

ソース

<style type="text/css">
    /* テーブル大枠 */
    .thfixscroll{
        margin:10px; padding:0;
    }
    .thfixscroll table {
        border-collapse:collapse;
        border-spacing:0px;
        border:1px solid #ccc;
    }
    /* 表頭・項目部分 */
    .thfixscroll th {
        margin:0; padding:0;
        background-color:#f7f7f7;
        border:1px solid #ccc;
    }
    .thfixscroll td {
        margin:0; padding:0;
        border:1px solid #ccc;
        background-color:#fff;
    }
    /* 表頭・項目部分の余白 */
    .thfixscroll div {
        margin:3px;
    }
    /* 表頭の背景色・余白 */
    .thfixscroll div.inbox { 
        margin:0 0 0 0; padding:0;
        overflow:auto;
        height:100px;
    }
     .thfixscroll div.w20  { width:20px; }
     .thfixscroll div.w40  { width:40px; }
     .thfixscroll div.w100 { width:100px; }
     .thfixscroll div.w200 { width:200px; }
</style>

<div class="thfixscroll">
    <table>
        <tr>
            <th><div class="w40">順位</div></th>
            <th><div class="w200">ユーザーOS</div></th>
            <th><div class="w100">割合</div></th>
            <th><div class="w100">アクセス数</div></th>
            <th><div class="w20"><!-- スクロール部分の余白 --></div></th>
        </tr>
        <tr>
            <td colspan="5" class="none">
                <div class="inbox">
                    <table>
                        <tr>
                            <td><div class="w40">1</div></td>
                            <td><div class="w200">Windows XP</div></td>
                            <td><div class="w100">76.2%</div></td>
                            <td><div class="w100">59,918</div></td>
                        </tr>
                        <tr><td><div>2</div></td><td><div>Windows 2000</div></td><td><div>15.3%</div></td><td><div>12,056</div></td></tr>
                        <tr><td><div>3</div></td><td><div>Macintosh</div></td><td><div>4.8%</div></td><td><div>3,847</div></td></tr>
                        <tr><td><div>4</div></td><td><div>Windows 98</div></td><td><div>0.8%</div></td><td><div>704</div></td></tr>
                        <tr><td><div>5</div></td><td><div>Linux</div></td><td><div>0.8%</div></td><td><div>696</div></td></tr>
                        <tr><td><div>6</div></td><td><div>Windows ME</div></td><td><div>0.6%</div></td><td><div>474</div></td></tr>
                        <tr><td><div>7</div></td><td><div>Windows NT 5.2</div></td><td><div>0.5%</div></td><td><div>396</div></td></tr>
                        <tr><td><div>8</div></td><td><div>-AskJeevesJapan</div></td><td><div>0.2%</div></td><td><div>176</div></td></tr>
                        <tr><td><div>9</div></td><td><div>Windows 3.x</div></td><td><div>0.1%</div></td><td>&nbsp;</td></tr>
                        <tr><td><div>10</div></td><td><div>Windows NT</div></td><td><div>0.1%</div></td><td><div>101</div></td></tr>
                        <tr><td><div>*</div></td><td><div>その他少数派(57件)</div></td><td><div>0.2%</div></td><td><div>175</div></td></tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>

polarized women