26 
<!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% に設定しようとしていますが、ウィンドウ幅を超えても効果はありません。ウィンドウと同じサイズになるようにテーブルの幅を変更するにはどうすればよいですか。

4

8 に答える 8

22

問題は、テーブル内のコンテンツがウィンドウ サイズのオファーの 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>

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

于 2013-11-06T10:04:11.997 に答える
20

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

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

  • 列数の削減
  • 任意のコンテンツで使用CSS white-space: nowrapするため、ブラウザーにはそのコンテンツをラップして幅を抑えるオプションがあります。
  • あなたが持っている余白、境界線、パディングを減らします
  • フォントサイズを小さくする
  • word-wrap:break-wordまたは_word-break: break-all;
  • 画面の幅に収まらないコンテンツをオーバーフローさせoverflow: scroll;ます (オプションは、visible、hidden、scroll、auto です)。

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

于 2013-11-06T09:59:00.587 に答える