テーブルの幅を固定して、テキストによって幅が変わらないように設定

テーブルの幅を固定して、テキストによって幅が変わらないように設定
ページ内のテーブルの幅を width="600px" に設定した後も、幅が固定されません。テキストが長すぎると折り返されず、テーブルが変形します。

解決:

1. テーブルの幅を設定します。絶対幅と相対幅の両方が許容されます。

テーブルレイアウト:固定;
このプロパティを設定すると、残りのすべての td の幅が同じになります。

この操作の後、表の幅は固定されますが、中の記事が非常に長い場合は、テキストが表を覆い隠します。

解決:

テキストを折り返すには、td に style="word-wrap:break-word;" を追加します。テキストを折り返したくない場合は、制限を超えるコンテンツを非表示にして省略記号に置き換えることができます。

上記tdを追加

コードをコピー
コードは次のとおりです。

オーバーフロー:非表示;
空白:折り返しなし;

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

TDに追加

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

コードをコピー
コードは次のとおりです。

<div style="width:100px;height:25px;overflow-x:hidden;overflow-y:hidden;">ああああああああああああああああああああああああああああああああ</div>

(2)TD幅が長さを超えたときに自動的に折り返すように設定する

コードをコピー
コードは次のとおりです。

<td><div style="width:100px;word-wrap:break-word;" >ああああああああああああああああああああああああああああああああああ</div>
</td>

<<:  LED を使って Linux カーネルを使い始める方法を探る

>>:  JavaScript の document.activeELement フォーカス要素の紹介

推薦する

MySQL マスター/スレーブ データベース同期構成と一般的なエラー

アクセス回数が増えると、時間のかかるデータベース読み取り操作では、データベースへの負荷を軽減するため...

Vueのインストール方法の紹介

目次1. グローバルに登録されたコンポーネント2. グローバルカスタム指示vue 、新しいプラグイン...

MySqlは、外部ネットワーク接続クライアントの低速問題を解決するためにskip-name-resolveを使用します。

Tencent Cloud上に構築されたMySQLは、開発用コンピュータでNavicatを使用して...

Docker を使用してイメージをローカルにパッケージ化してデプロイする方法

初めてDockerを使用してイメージをローカルにパッケージ化してデプロイするまず、私のラップトップシ...

Dockerイメージのローカル移行の実装

最近 Docker を勉強しているのですが、よく問題に遭遇します。Docker イメージをダウンロー...

Nginx ロケーション設定(ロケーションのマッチング順序)の詳細な説明

ロケーションは「位置指定」を意味し、主にさまざまな位置指定のための URI に基づいています。これは...

XHTML 入門チュートリアル: よく使われる XHTML タグ

<br />記事と同様に、Web ページにも明確な段落と重要度の異なるタイトルが必要です...

Centos8 は kdc 暗号化に基づいて nfs を構築します

目次構成nfs サーバー (nfs.skills.com) nfs クライアント (client.s...

Linux でのファイル コンテンツの重複排除と交差と差異の実装

1. データ重複排除日常業務では、Hive や Impala を使用してクエリとエクスポートを行う際...

Vue パッケージ化後の空白ページの解決策

1. vue-cli がプロジェクト パッケージを作成した後にページが空白になる問題の解決方法コマン...

シンプルな計算機を実装するためのネイティブ js

この記事の例では、参考までに簡単な計算機を実装するためのjsの具体的なコードを共有しています。具体的...

Linux で gdb を使用してコア ファイルをデバッグする方法

1.コアファイルプログラム実行中にセグメンテーション エラー (コア ダンプ) が発生すると、プログ...

VueでTypescriptの設定手順を使用する

目次1. TypeScriptが古いVueプロジェクトに導入されるVue+Typescript プロ...

Tomcat での jar のロードに関する異常な問題の分析と解決

現象の説明:プロジェクトでは、Springboot を使用して Web プロジェクトを開始します。起...

React Contextの理解と応用についてお話ししましょう

目次序文React Context の初見コンテキストの使い方コンテキストを直接取得できるいくつかの...