12

私は次のようにスタイルをコーディングしました：

table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:14px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
        width: 400px;
}

そして、Firebugにオーバーライドは見られません。それにもかかわらず、テーブル幅は812ピクセルとして計算されます。

なんで？

実際のページはこちら（ロシア語）：http：//garmonia-znakomstva.ru/service.html

アップデート

非表示の単語区切りを追加できますか？スペースが不十分な場合は単語の区切りとハイフンが発生し、十分なスペースがある場合は連続した単語が発生しますか？

4

6 に答える 6

22

幅の設定は無視されません。セルの内容の最小要件によって、オーバーライドされるだけです。各列で、最長の単語が可能な最小の幅を決定します。これはCSS仕様に準拠しています。テーブルの場合、widthプロパティはデフォルトで推奨される最小幅にすぎません。

ただし、「可能な限り最小」は相対的なものです。さまざまな方法で単語分割を有効にできます。ただし、これでどこに移動するかを確認するには、<html>タグをに変更し、CSS<html lang=ru>にルール* { -moz-hyphens: auto }を追加して、Firefoxでページをテストすることでテストできます。単語がハイフンでつながれ、幅が宣言された幅にできるだけ近くなるようにフォーマットされたテーブルが表示されます。それはかなりひどいように見えます。宣言された幅は、コンテンツに対して単純に小さすぎます。

table { table-layout: fixed }または、 CSSで設定してみてください。これにより、何があっても幅が強制されます。これにより、セルのコンテンツがセルからオーバーフローします。私もあなたがこれを好きになるとは思わない。

したがって、このような狭い幅を強制するのではなく、幅の設定を完全に削除してハイフンを有効にすることをお勧めします。結果は比較的良好に見えます。ハイフネーションについては、ブラウザ間で機能するJavaScriptベースのアプローチであるHyphenator.jsを使用することをお勧めします。CSSベースのアプローチでは、ブラウザのサポートがまだかなり制限されています。

于 2012-12-13T03:55:00.160 に答える
9

あなたの問題は、テーブルの各セルの個々の単語が長すぎるという事実によって引き起こされ、あなたはこれがどのように扱われるべきかを指定していません。

追加してみてください：

word-break: break-all;

あなたのtable.gridtable tdルールに。

于 2012-12-12T23:54:37.387 に答える
4

これは、テーブルにデフォルトでラップできない単語が含まれているため、テーブルを縮小できないためです。効果が発生します：

| verylongwordandsoon | anotherlongwordinrussian | justanotherword

に設定しようとするfont-sizeと1px、幅が正確に400ピクセルであることがわかります。

ただし、CSS3では、CSSプロパティでword-break処理できます。

word-break: break-all;
于 2012-12-12T23:55:15.890 に答える
2

これを明示的に適用すると、正しい結果が得られ、幅が尊重され、新しい行を使用した長いテキストとそれに応じて（幅ではなく）高さが拡張されます。

td { white-space:normal}
于 2017-09-08T09:28:12.413 に答える
1

テーブルをその内容に対して小さすぎるようにすることはできません。フォントサイズを小さくするか、別のレイアウト（列の数を減らすなど）を試してみてください。

更新された質問について：はい、非表示の単語区切りを追加できます（1つの例：Opera Browserのスペースを空けた単語をラップする方法）が、これは実際には最後の手段です。

于 2012-12-12T23:57:35.017 に答える
0

あなたのcssファイルはすでにwhite-space: nowrap;ワードラップを防ぐ定義をしている可能性があります。

于 2015-03-24T14:02:49.830 に答える