コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 表の幅をテキストと変わらないように設定して固定_HTML/Xhtml_Webページ制作

表の幅をテキストと変わらないように設定して固定_HTML/Xhtml_Webページ制作

WBOY
リリース： 2016-05-16 16:38:52
オリジナル
1642 人が閲覧しました

ページ上の表の幅を width="600px" に設定しても、幅が固定されないため、テキストが長すぎると折り返されず、表が変形します。

解決策:

1.table 幅を設定します。絶対幅と相対幅の両方を使用できます。

table-layout:fixed;
この属性を設定します。他のすべての td はすべて同じ幅です。

これを実行すると、表の幅は固定されますが、内部の記事が非常に長い場合はテキストで覆われてしまいます。

解決策:

スタイルを追加= in td word-wrap:break-word;" 単語を自動的に折り返します。行を折り返したくない場合は、余分な内容を非表示にして省略記号に置き換えることができます:

Add

コードをコピーしますコードは次のとおりです。
overflow:hidden; >white-space:nowrap;


text-overflow:ellipsis; (現在 IE8 でのみテストされています)
推奨される方法 (2013-11-14 by Zhang Lei) コンテンツを制御するために div を使用しますTD の

TD に追加

(1) 幅と高さを超えるテキストは自動的に非表示になります



コピーコードコードは次のとおりです:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa& lt;/div>


(2) td の幅が長さを超えた場合の自動行折り返しを設定する



コードをコピーしますコードは次のとおりです:
/td>

関連ラベル：
table 幅
ソース：php.cn
前の記事：HTMLマルチヘッダーテーブルコード_HTML/Xhtml_Webページ制作 次の記事：htmlポップアップdivを使ってモバイルセンタリングを実現するのはとても簡単_HTML/Xhtml_Webページ制作
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...
から 2024-04-05 09:26:49
0
1
1418
mysqlでネストされた関連値を取得する データベース内の複数のエントリに基づいて関連する値を取得しようとしています。私は JOIN などの使用に関して MySQL を初めて使用するため、不必要に PHP に関与することを...
から 2024-04-04 17:29:06
0
2
365
特定のクリック イベントをリッスンし、他のクリック イベントを抑制するにはどうすればよいですか? 私の Web アプリケーションには、各行が特定の URL にリンクする HTML テーブルが含まれています: <table><trdata-url="h...
から 2024-04-04 16:55:27
0
1
317
表のタイトルを垂直方向に回転、中央 + 下揃え、クロスブラウザー ヘッダーが回転されたテーブルがありますが、これは Chrome では期待どおりに表示されますが、Firefox では期待どおりに表示されません。 Chromev108 (垂直下、水...
から 2024-04-04 16:45:25
0
1
330
固定ヘッダーと回転列ヘッダーを備えた表 固定ヘッダーと固定最初の列を持つテーブルがあります。また、列ヘッダーを 45 度回転したいと考えています。固定タイトルには背景色を設定する必要があります。ただし、次の列の背景が前の...
から 2024-04-03 08:50:32
0
1
362
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート