web-dev-qa-db-ja.com

Divの外部でオーバーフローするテーブル

親のdivの外でオーバーフローしないように明示的に宣言された幅を持つテーブルを停止しようとしています。私はmax-widthを使用して何らかの方法でこれを行うことができると思いますが、これを動作させることができないようです。

次のコード（非常に小さなウィンドウ）がこれを引き起こします。

<style type="text/css">
  #middlecol {
    width: 45%;
    border-right:2px solid red;
  }
  #middlecol table {
    max-width:100% !important;
  }
</style>

<div id="middlecol">
  <center>
    <table width="400" cellpadding="3" cellspacing="0" border="0" align="center">
      <tr>
        <td bgcolor="#DDFFFF" align="center" colspan="2">
          <strong>Notification!</strong>
        </td>
      <tr>
        <td width="50">
          <img src="http://www.example.com/img.png" width="50" height="50" alt="" border="0">
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </td>
      </tr>
    </table>
  </center>
 </div>

赤い線はdivの右側の境界線であり、ブラウザウィンドウを小さくすると、テーブルがそれに収まらないことがわかります。

htmlcsshtml-table
81
waiwai933

以下を実行して方向を変えます。

<style type="text/css">
  #middlecol {
    border-right: 2px solid red;
    width: 45%;
  }

  #middlecol table {
    max-width: 400px;
    width: 100% !important;
  }
</style>

また、私はあなたにアドバイスします：

  • centerタグを使用しない（非推奨）
  • width、bgcolor属性は使用せず、CSSで設定します（widthおよびbackground-color）

（レンダリングされたテーブルを制御できると仮定）

21
Zyphrax

table-layout:fixedを使用して、テーブルが親divを超えて拡大するのを防ぐことができます。

以下のCSSは、テーブルをそれを囲むdivの幅まで拡張します。

table 
{
    table-layout:fixed;
    width:100%;
}

このトリックを見つけました こちら 。

187
James Lawruk

大まかな回避策は、display: tableを含むdivに設定することです。

62
questzen

上記のすべてのソリューションを試してみたが、うまくいきませんでした。上下に3つのテーブルがあります。最後のものがあふれました。私はそれを使用して修正しました：

/* Grid Definition */
table {
    Word-break: break-Word;
}

EdgeモードのIE11の場合、これをWord-break:break-allに設定する必要があります

29
Mr. Doomsbuster

最初はJames Lawrukの方法を使用しました。ただし、これにより、tdのすべての幅が変更されました。

私にとっての解決策は、列でwhite-space: normalを使用することでした（white-space: nowrapに設定されました）。この方法では、テキストは常に壊れます。 Word-wrap: break-Wordを使用すると、Wordの途中であっても、必要なときにすべてが破損することが保証されます。

CSSは次のようになります。

td, th {
    white-space: normal; /* Only needed when it's set differntly somewhere else */
    Word-wrap: break-Word;
}

Word-wrap: break-Wordはテーブル内の単語を読みにくくする可能性があるため、これは必ずしも望ましい解決策とは限りません。ただし、テーブルの幅は適切に保たれます。

12
Sander Koedood

上記のほとんどすべてを試しましたが、うまくいきませんでした...

Word-break: break-all;

これは、親div（テーブルのコンテナ）に追加されます。

2
Waheed Asghar