web-dev-qa-db-ja.com

CSSテーブルを画面幅に合わせるにはどうすればよいですか？

現在、テーブルの幅が広すぎるため、ブラウザは水平スクロールバーを追加します。

htmlcssscrollbarcss-tables
23
David B

テーブルcontentが広すぎる場合（ この例 のように）、コンテンツを変更する以外にできることはありませんブラウザがより狭い形式で表示できるようにします。以前の回答とは異なり、幅が100％に設定されていても、コンテンツが広すぎる場合（リンク、および this one 、デモンストレーション）はまったく効果がありません。ブラウザは、可能であればテーブルを左と右のマージン内に保持しようとし、できない場合は水平スクロールバーのみに頼ります。

コンテンツを変更してテーブルをより狭くするいくつかの方法：

  • 列の数を減らします（おそらく、1つの巨大なテーブルを複数の独立したテーブルに分割します）。
  • CSSを使用している場合white-space: nowrapのいずれかのコンテンツ（または古いnowrap属性、 、nobr要素など）、それらがなくても生きられるかどうかを確認し、ブラウザが幅を抑えるためにそのコンテンツをラップするオプションを持つようにします。
  • 本当に広い余白、パディング、ボーダーなどを使用している場合は、それらのサイズを小さくしてみてください（しかし、あなたはそれを考えていたと思います）。

テーブルの幅が広すぎるが、その正当な理由がわからない場合（コンテンツがそれほど広くないなど）、テーブルのスタイル設定方法、周囲の要素に関する詳細情報を提供する必要があります。繰り返しますが、デフォルトでは、ブラウザは可能な場合はスクロールバーを回避します。

20
T.J. Crowder

CSS：

table { 
    table-layout:fixed;
}

コメントからCSSで更新します。

td { 
    overflow: hidden; 
    text-overflow: Ellipsis; 
    Word-wrap: break-Word;
}

携帯電話の場合、テーブルの幅はそのままにしておきますが、追加のCSSクラスをテーブルに割り当てて、水平スクロールを有効にします（テーブルはモバイル画面に表示されなくなります）。

@media only screen and (max-width: 480px) {
    /* horizontal scrollbar for tables if mobile screen */
    .tablemobile {
        overflow-x: auto;
        display: block;
    }
}

十分に十分です。

36
Kai Noack
table { width: 100%; }

Bodyで使用されるすべてのマージンとパディングのため、期待どおりの結果が得られません。したがって、IFスクリプトはOKで、Jqueryを使用します。

$("#tableid").width($(window).width());

そうでない場合は、このスニペットを使用してください

<style>
    body { margin:0;padding:0; }
</style>
<table width="100%" border="1">
    <tr>
        <td>Just a Test
        </td>
    </tr>
</table>

幅がページを完全に覆っていることがわかります。

主なことは、本文で示したようにmarginとpaddingを無効化しすぎることです。その後、設定されます。

7
Starx

どうですか：

table { 
   width: 100%; 
}

画像が大きすぎて表が広くなる可能性があります。

また、テーブルが他のブラウザでどのように見えるかを確認してください。

0
True Soft

持っているコンテナ要素にテーブルを置きます

オーバーフロー：スクロール; max-width：95vw;

または、テーブルを画面に合わせて、overflow：すべてのテーブルセルをスクロールします。

0
Khayri R.R. Woulfe

この質問にはすでに良い解決策がありますが、誰もがフォントサイズを忘れてしまいました。これは最後になりましたが、少なくとも解決策ではありません。フォントサイズを2または3 px減らすことができます。それでもユーザーには見やすく、テーブルの幅を多少減らすことができます。これは私のために働いた。私のテーブルには5つの列4があり、完全に5番目がビューポートから外れたことを示しています。だから私はフォントサイズを小さくし、5列すべてが画面に収まっている

table th td
{
 font-size:14px;
}

参考までに、テーブルの列が多すぎても減らすことができない場合は、水平スクロールよりもフォントサイズを小さくすることをお勧めします。 2つの利点があります。モバイルWebのスタイルは同じまま（水平スクロールなしで良好）で、ユーザーが小さなサイズを見ると、ユーザーのほとんどが快適なレベルまでテーブルを拡大します。

0
gourav bajaj

セットする font-sizeビューポート幅に関連する単位、例：

table { font-size: 0.9vw; }

これにより、ページが狭すぎる場合にフォントが読めなくなりますが、これは許容範囲内である場合があります。

0
Sergey M