web-dev-qa-db-ja.com

CSS：テーブルの最大幅を設定します

私はhtmlでアプリケーションログを生成していますが、かなり厄介な問題に遭遇しました。私は次のレイアウトを持っています：

| Action | Result | File path           |

例えば

| Copy | Success | C:\VeryVeryVeryLongF |
|      |         | ileName.txt          |

列1と2には、短いラベルのみが表示されます。それらの内容は1行にとどまる必要があります。一方、列3には非常に長いファイルパスが含まれている場合があり、1行に収まらない場合は複数行にまたがる必要があります。

これを実現するために、最初の列にwhite-space: nowrap;を使用し、最後の列にwhite-space: normal; Word-break: break-all;を使用しました。また、テーブルにはwidth:100%があります。

これはChromeとIEではうまく機能しますが、Firefoxでは機能しません：要するに、Firefox8.0に拡大しないように指示する方法が見つからないようですテーブルの最後の列で、代わりにテキストを複数行にまたがらせます。前の例では、Firefoxは印刷します

| Copy | Success | C:\VeryVeryVeryLongFileName.txt |

最初の2列のテキストは異なる場合があるため、手動で幅を設定してtable-layout: fixedを使用することはできません。また、テーブルにmax-widthを設定し、それをdivでラップしてみましたが無駄になりました。

実際の例については、 http://jsfiddle.net/GQsFx/6/ を参照してください=）FirefoxをChromeのように動作させるにはどうすればよいですか？

htmlcssfirefoxwidthcss-tables
15
Clément

これは機能しますか？これはjsfiddleで機能するようです。パーセンテージベースの最初の2列、次に幅自動3番目の列、テーブルレイアウト：テーブルに固定。

http://jsfiddle.net/keithwyland/uuF9k/1/

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

.actions tr td {
  white-space: nowrap;
  width: 15%;
}

.actions tr td:nth-child(3) {
  white-space: normal;   
  Word-break: break-all;
  Word-wrap: break-Word;
  width: auto;
}
9
keithwyland

このCSSを使用する

.actions {
width:100%;
}
.actions tr td:nth-child(3) {
 width:200px;
 Word-wrap:break-Word;
  display:inline-block;
}
0
pravin