最近の更新

2016年9月16日金曜日

テーブルの列(セル)幅がブラウザで狭められない方法(td・thのstyleのwidth)

【目的】
テーブルの列(セル)幅がブラウザで狭められないようにtd・thのstyleのwidthを指定してみます。
※この方法は失敗です。⇒この件のまとめ・解決策。



【手順】
1.「index.html」というファイルを作成。
2.「index.html」を以下の様に入力。
<!doctype html>
<html>
    <head>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th style="width: 100px;">番号</th>
                    <th style="width: 100px;">名前</th>
                    <th style="width: 100px;">項目3</th>
                    <th style="width: 100px;">項目4</th>
                    <th style="width: 100px;">項目5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>あいうえお</td>
                    <td>項目1-3</td>
                    <td>項目1-4</td>
                    <td>項目1-5</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>かきく<br />けこ</td>
                    <td>項目2-3</td>
                    <td>項目2-4</td>
                    <td>項目2-5</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

3.「index.html」をブラウザで開きます。
4.以下の様にテーブルの幅より、ブラウザの幅が大きい場合は列(セル)幅が狭められずに表示されます。




5.以下の様にブラウザの幅を狭めると、列(セル)幅が狭めらてしました。




以上です。

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。

関連記事