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

テーブルの幅を固定して、テキストによって幅が変わらないように設定
ページ内のテーブルの幅を 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 フォーカス要素の紹介

推薦する

フラッシュプラグインを使用してPCのカメラを呼び出し、TMLページに埋め込む方法

序文この記事を書いた主な理由は、チームリーダーが、ブラウザを使用してコンピューターのカメラを呼び出し...

Linux でスペースを含むファイルを削除する (ディレクトリではない)

日常業務では、スペースのないファイルに遭遇することがよくあります。これにより、削除操作がはるかに簡単...

Nginx リバース プロキシはポート 80 のリクエストを 8080 に転送します

まず、一連の概念を理解しましょう。nginx リバース プロキシとは何でしょうか?リバース プロキシ...

JavaScript 配列重複排除問題の詳細な研究

目次序文 👀リサーチを始めましょう🐱‍🏍オリジナル🧶 indexOf を使用した元の方法の最適化 ✍...

JavaScript での HTML キャンバスとページ ストレージ テクノロジの使用に関する詳細な説明

目次1. JavaScriptはHTMLでキャンバスを使用する2. ページストレージ技術1. Jav...

vue.js パッケージ化プロジェクトの後の空白ページの解決策

Vueに触れたばかりのパートナーの多くは、開発環境ではVueプロジェクトは正常であるが、パッケージ化...

HTMLのposition属性の使い方(4種類)の詳しい説明

位置の 4 つのプロパティ値は次のとおりです。 1.相対的な2.絶対3.修正4.静的これら 4 つの...

Nginx のステータス監視とログ分析の詳細な説明

1. Nginx ステータス監視Nginx には、Nginx の全体的なアクセス ステータスを監視す...

Nginx ベースの HTTPS ウェブサイトを設定する手順

目次序文:暗号化アルゴリズム: 1. HTTPS の概要2. NginxはHTTPSウェブサイト設定...

MySQL 8.0.18 のさまざまなバージョンのインストールとインストール中に発生した問題 (要点の要約)

概要: MYSQLの問題解決記録:どのようなインストール方法 (rpm、gz、gz.xz) を使用す...

少なくともn日間連続してログインしているユーザーに対するSQLクエリ

MySQL ツールを使用して、3 日間連続する例を見てみましょう。 1. SQL テーブルを作成しま...

Windows10 HomeバージョンにDockerをインストールするときに発生する問題の概要

Docker ダウンロード アドレス: http://get.daocloud.io/#instal...

数千万のMySQLデータ量を素早くページ分割する方法

序文バックエンド開発では、一度に大量のデータがロードされ、メモリやディスク IO のオーバーヘッドが...

Linux カーネルの探究: Kconfig の秘密

Linux 構成/ビルド システムがどのように機能するかを深く理解します。 Linux カーネル構成...

MYSQLパターンマッチングREGEXPの使用に関する一般的な話など

のようにLIKE ではデータ全体が一致する必要がありますが、REGEXP では部分的な一致のみが必要...