テーブルの幅を固定して、テキストによって幅が変わらないように設定
|
ページ内のテーブルの幅を width="600px" に設定した後も、幅が固定されません。テキストが長すぎると折り返されず、テーブルが変形します。 解決： 1. テーブルの幅を設定します。絶対幅と相対幅の両方が許容されます。 テーブルレイアウト:固定; このプロパティを設定すると、残りのすべての td の幅が同じになります。 この操作の後、表の幅は固定されますが、中の記事が非常に長い場合は、テキストが表を覆い隠します。 解決： テキストを折り返すには、td に style="word-wrap:break-word;" を追加します。テキストを折り返したくない場合は、制限を超えるコンテンツを非表示にして省略記号に置き換えることができます。 上記tdを追加 コードをコピー コードは次のとおりです。オーバーフロー:非表示; 空白:折り返しなし; text-overflow:ellipsis; (現在はIE8でのみテスト済み) 推奨される方法 (2013-11-14 by Zhang Lei) div を使用して td のコンテンツを制御する TDに追加 （１）テキストは幅と高さの制限を超えると自動的に非表示になります。 コードをコピー コードは次のとおりです。<div style="width:100px;height:25px;overflow-x:hidden;overflow-y:hidden;">ああああああああああああああああああああああああああああああああ</div> （２）TD幅が長さを超えたときに自動的に折り返すように設定する コードをコピー コードは次のとおりです。<td><div style="width:100px;word-wrap:break-word;" >ああああああああああああああああああああああああああああああああああ</div> </td> |
<<: LED を使って Linux カーネルを使い始める方法を探る
>>: JavaScript の document.activeELement フォーカス要素の紹介
推薦する
HTMLのマーキータグは、シームレスなスクロールマーキー効果を実現します。
<marquee> タグはペアで表示されるタグです。最初のタグ <marquee...
MySQL 5.6 の「暗黙的な変換」によりインデックスが失敗し、データが不正確になる
背景SQL クエリを実行するときに、where 条件の vachar 型フィールドの単一引用符を削除...
Vue-router ネストルーティングの詳細な説明
目次ステップ1. ルーティング ルールを設定し、子構成項目を使用します。 2. ジャンプ（フルパスを...
Linux で Xfce デスクトップ環境を使用すべき 8 つの理由
いくつかの理由（好奇心も含む）から、数週間前に Linux デスクトップとして Xfce を使い始め...
インターネットウェブデザインにおけるバイオニックデザインの簡単な紹介
バイオニックデザインといえば、飛行機の発明、ドバイのブルジュ・アル・アラブ、平泳ぎなどを思い浮かべる...
Vue.jsの機能コンポーネントに関する包括的な理解
目次序文React 関数コンポーネントVue (2.x) の機能コンポーネント🌰 例: el-tab...
MySQL でテーブルデータをクリアする 2 つの方法とその違い
MySQL でデータを削除するには 2 つの方法があります。切り詰めは大まかな伐採の一種である削除は...
mysql バッチで大量のデータを削除する
mysql バッチで大量のデータを削除する1000万件のレコードを持つテーブル（syslogs）があ...
MySQL における count(*)、count(1)、count(col) の違いのまとめ
序文count 関数は、テーブルまたは配列内のレコードをカウントするために使用されます。count(...
MySQLチュートリアルではストアドプロシージャを徹底的に理解します
目次1. ストアドプロシージャに関連する概念2. ストアドプロシージャの使用1) ストアドプロシージ...
Dockerボリュームのファイルマッピング方法
背景ブロックチェーン ログ モジュールで作業しているときに、コンテナーが実行されている場合は、ログ ...
JavaScript オブジェクトを作成する 3 つの方法
目次1. オブジェクトリテラル2. newキーワードはオブジェクトを作成する3. Object.cr...
純粋な HTML+CSS でオリンピック リングを実装するためのサンプル コード
レンダリング コード - 青と黄色のリングを例に挙げます <div class="コ...
JavaScript カウントダウン プロンプト ボックス
この記事の例では、カウントダウンプロンプトボックスを実装するためのJavaScriptの具体的なコー...
RHEL8 で静的 IP アドレスを設定するさまざまな方法の簡単な分析
Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...