テーブルセルの幅tdの設定は無効であり、内部コンテンツによって常に引き伸ばされます

テーブルセルの幅tdの設定は無効であり、内部コンテンツによって常に引き伸ばされます
テーブルページを作成するときに、td に設定された幅が無効になることがあります。td の幅は常に内部コンテンツによって拡張されます。パディングを設定することはできますが、幅を直接設定することは無効です。次の例を詳しく見てみましょう。

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

<div>
<表の境界線="1px">
<tr>
<td width="100px" style="width: 100px !important;">1000800</td>
<td>1000000</td>
<td>1000000</td>
</tr>
<tr>
<td>1000000</td>
<td>10000300</td>
<td>1000000</td>
</tr>
</テーブル>
</div>
<表の境界線="1px">
<tr>
<td width="100px">1000000</td>
<td>1000000</td>
<td>1000000</td>
</tr>
<tr>
<td>1000000</td>
<td>10000300</td>
<td>1000000</td>
</tr>
</テーブル>
* {マージン: 0; パディング: 0;}
.div1 {位置: 相対; 幅: 150px; 高さ: 100px; オーバーフロー: スクロール; 境界線: 1px 赤一色;}


クラス div1 の最初のセルの幅は設定されているものの、無効であることがわかります。セルの内容は常にコンテンツによって決まります。コンテンツによって決まるので、「コンテンツ」がセルを拡張できるようにする方法を見つける必要があります。それだけです。

td に div を追加し、div の幅を設定できます。試してみましょう:

クラス div1 のコード部分を変更します。

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

<td width="100px" style="width: 100px !important;">1000800</td>

変更後

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

<td><div>1000800</div></td>

次に、次のスタイルで記述します。

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

td div {
幅:100ピクセル;
}

ページを更新すると、効果は次のようになります。

クラス div1 のセル幅が有効になっていることがわかります。

<<:  Vue プロジェクトで TS (TypeScript) を使用するための入門チュートリアル

>>:  画像ファイルの形式とその選択方法

推薦する

HTML iframe 使用状況の概要の収集

Iframe 使用状況の詳細な分析<iframe frameborder=0 width=17...

カルーセル効果を実現するための純粋なjs

この記事では、カルーセルマップの効果を実現するためのjsの具体的なコードを参考までに共有します。具体...

ディスク容量不足による MySQL レプリケーション障害の解決方法

目次ケースシナリオ問題を解決するまとめケースシナリオ本日、オンラインで問題が発見されました。監視範囲...

Vue プロジェクトで addRoutes を使用する際の問題の解決策

目次序文1. 404 ページ1. 原因2. 解決策2.白い画面を更新する1. 原因2. 解決策3. ...

Vueリクエストインターセプターの設定方法の詳しい説明

以下の手順に従ってください1. request.jsコンテンツ: http リクエスト インターセプ...

VMwareのCentosシステムでNavicatがMySQLサーバーに接続できない問題を解決します

ホスト 'xxxx' はこの MySQL サーバーに接続できませんエラー: 1130...

Dockerコンテナ終了エラーコードの手順

実行後、一部の Docker コンテナが終了することがあります。原因を調べるには、Docker コン...

clipboard.js の使用法の概要

目次(1)はじめに: (2)クリップボードの内容をコピーする方法は次のとおりです。 (3)関数演算に...

Windows Server 2008 のサーバー パフォーマンス監視に関するチュートリアル

次に、ログ管理、ログのアーカイブ、ログのトラブルシューティング、イベントの転送と収集のためのコンピュ...

Vueにおけるキーの役割と原理の詳細な説明

目次1. 結論から始めましょう2. キーの役割2.1 例2.2 上記の例を修正する2.3 例を再度修...

CSS3 オーバーフロープロパティの説明

1. オーバーフローOverflow はオーバーフロー(コンテナ)です。コンテンツがコンテナを越える...

MySQL マルチマスターと 1 スレーブのデータバックアップ方法のチュートリアル

概要いずれかのデータベースに対する操作は他のデータベースに自動的に適用され、2 つのデータベースのデ...

MySQL マスタースレーブの原理と構成の詳細

MySQLのマスタースレーブ構成と原理、参考までに具体的な内容は以下のとおりです。 1. 環境の選択...

Vue3 の参照と参照の詳細

エディターは、Vue3のデータの関連する問題も共有します。次のような例を見てみましょう。 Vue.c...