web-dev-qa-db-ja.com

HTMLテーブルの幅が機能しない

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

    <table border="1" width="100%">

        <tr>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        </tr>


    </table>




</body>
</html>

上記のテーブルのテーブル幅を100％に設定しようとしていますが、ウィンドウ幅を超える効果はありません。ウィンドウと同じサイズになるようにテーブルの幅を変更するにはどうすればよいですか？.

htmlcsswidthhtml-table
16
user2959594

問題は、テーブル内のコンテンツがウィンドウサイズの100％を超えるスペースを必要とすることです。

できることは、CSSのオーバーフロープロパティを使用することです。次の例を試して、これがあなたのためのオプションであるかどうかを選択しました：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
    .table {
        color: green;
        display: block;
        max-width: 100%;
        overflow: scroll; <!-- Available options: visible, hidden, scroll, auto -->
    }
</style>
</head>
<body>

<table border="1" class="table">

    <tr>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    </tr>


</table>
</body>
</html>

オーバーフロープロパティには、表示、非表示、スクロール、自動の4つのオプションがあります。上記の例は、スクロールバーをテーブル自体に追加するscroll-optionを示しています。

19
DonnyDee

ブラウザーがより狭い形式で表示できるようにコンテンツを変更することを除いて、テーブルのコンテンツが広すぎる場合（例のように）できることはありません。コンテンツが広すぎる場合、width:100%;を設定しても効果はありません。ブラウザは、水平スクロールバーを表示するだけです。

次の方法でコンテンツをさらに絞り込むことができます。

  • 列数を減らす
  • いずれかのコンテンツでCSS white-space: nowrapを使用しているため、ブラウザは幅を抑えるためにそのコンテンツをラップするオプションがあります。
  • マージン、ボーダー、パディングを減らします
  • フォントサイズを小さくする
  • Word-wrap:break-WordまたはWord-break: break-all;を使用します
  • overflow: scroll;で画面の幅に収まらないコンテンツをオーバーフローさせます（オプションは表示、非表示、スクロール、自動）

ブラウザはスクロールバーを回避できますが、コンテンツがページの幅に収まらない場合は回避できません。

13
tomsullivan1989

要素をセルに入れることができます-それが私がしたことです。

<table>
    <tr>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
    </tr>
    <tr>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
    </tr>
</table>
0
Stevoh