web-dev-qa-db-ja.com

HTMLテーブルがコンテナのサイズを超えないようにする

この質問は何度か尋ねられましたが、提供された答えはどれも私を助けてくれないようです：

こちらの動作をご覧ください：http://jsfiddle.net/BlaM/bsQNj/2/

2列の「動的」（パーセントベース）レイアウトがあります。

.grid {
    width: 100%;
    box-sizing: border-box;
}
.grid > * {
    box-sizing: border-box;
    margin: 0;
}
.grid .col50 {
    padding: 0 1.5%;
    float: left;
    width: 50%;
}

これらの各列には、列幅全体を使用することになっているテーブルがあります。

.data-table {
    width: 100%;
}
.data-table td {
    white-space: nowrap;
    text-overflow: Ellipsis;
    overflow: hidden;
}

私の問題は、そのテーブルの列の一部に、テーブルの指定された幅に収まるように切り捨てる必要があるコンテンツがあることです。しかし、それは起こりません。互いに重なり合っている2つのテーブルを取得します。

要件：

  • パーセントベースにする必要があります。絶対サイズを設定できません。
  • 各行の高さが1テキスト行を超えてはなりません（空白を削除すると発生します：nowrap）
  • Chrome、Firefox、Internet Explorer 8以降で動作する必要があります
  • 印刷時に1枚の用紙に収まらなければならないため、テーブルを上下に表示できません。

私が試したもの：

  • 内部で、幅とオーバーフローを使用します。何も変更しませんでした。
  • 「表示：テーブル;」 divを含む場合-2列ではなく、テーブルが互いに下に表示されました
  • 「table-layout：fixed;」 -すべての列の幅を同じにする
  • 列2 + 3の幅は合計で30％であることがわかっているため、列1を70％に手動で設定しようとしました-何も変更しませんでした
  • ゼロ幅のスペース コンテンツ-何も変更しませんでした。おそらく空白が原因です：nowrap;

関連する質問：

htmlcsshtml-tablecolumn-width
36
BlaM

テーブルレイアウトプロパティを追加する必要があります。

table-layout: fixed;

また、styleタグだけでなく、表のHTMLタグにwidth = 100％を含めます。

http://jsfiddle.net/reeK5/

58
eudemonics

おそらくmax-width: 0;私が発見したハック。

いくつかの制限があり、HTMLの代わりにCSSテーブルを使用する必要がありますが、動作します：

.leftBlock
{
    width: 100%;
    max-width: 0;
    Word-wrap: break-Word;
    overflow: hidden;
}

.rightBlock
{
    width: 200px;
    max-width: 200px;
    min-width: 200px;
}

http://jsfiddle.net/Cyber​​AP/NUHTk/103/

5
CyberAP

テーブルでの測定の動作は異なります。一般に、テーブルセルの幅は最小幅として処理されます。

余分なマークアップを追加してもかまわない場合の1つの解決策は、コンテンツを配置する各テーブルセル内にdivを配置することです。次に、このdivに幅または最大幅を指定します。そう

<td>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</td>

になる

<td><div>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</div></td>

等々。

更新されたフィドルを参照してください： http://jsfiddle.net/bsQNj/4/

編集：フィドルにはいくつかの作業が必要だと思います-必要な場所にdivを置くのを忘れました。しかし、私はあなたがこの考えで働くことができることを望みます。

2
Mr Lister
.div {
  width:300px;
  border:1px solid;
}
.breaked {
  Word-break: break-all;
}
table{
  border:1px solid red;
}
td {
  border:1px solid green;
}
<div class="div">
<table>
  <tr>
    <td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
    <td>13</td>
  </tr>
  <tr>
    <td>ddddddddddddd</td>
    <td>aa</td>
  </tr>
 </table>
  <br /><hr/><br />
  <table class="breaked">
  <tr>
    <td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
    <td>13</td>
  </tr>
  <tr>
    <td>ddddddddddddd</td>
    <td>aa</td>
  </tr>
 </table>
</div>
1
Kris Roofe