テーブルセルの幅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) を使用するための入門チュートリアル

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

推薦する

Vue.js フロントエンドプロジェクト向け多言語ソリューションのアイデアと実践

目次1. 通常どのようなコンテンツを処理する必要があるか2. 基本的な考え方3. 具体的な実践の詳細...

MySQL はデータベースを動的に更新します スクリプト例の説明

具体的なupgradeスクリプトは次のとおりです。インデックスを動的に削除する アップグレードが存在...

Linux における「/」と「~」の違いの詳細な説明

「/」はルートディレクトリ、「~」はホームディレクトリです。 Linux ストレージはツリー状にマウ...

MySQL のデータの偶発的な削除の解決策と kill ステートメントの原則

mysql が誤ってデータを削除しました削除ステートメントを使用して誤ってデータ行を削除する誤ってデ...

HTMLはa要素hrefのURLリンクを自動的に更新したり新しいウィンドウを開いたりする機能を実装する

場合によっては、次のような機能を実装したいことがあります。リンクをクリックします。リンクがブラウザで...

Nginx を使用して https ルートドメイン名への 301 リダイレクトを実装するためのサンプル コード

SEO とセキュリティを考慮して、301 リダイレクトが必要です。以下の一般的な処理には Nginx...

Mysqlはブール型の演算を設定します

Mysqlはブール型を設定します1. Tinyintタイプテストテーブルを作成し、blフィールドをブ...

win2008 サーバー セキュリティ設定の展開ドキュメント (推奨)

私は新年を迎える前からプロジェクトに取り組んでいましたが、ここ数日で、新しいサーバー用に新しく増設し...

Webpackプラグインを書いてnpmに公開するための80行のコード

1. はじめに最近、 Webpackの原理を勉強しています。これまでは Webpack の設定方法し...

スタイル属性 (element.style) で定義されたインライン スタイルを削除する方法

Magento を頻繁に変更する場合、element.style に遭遇することがあります。 これは...

nginx をベースにリロードなしでアップストリーム サーバーの動的な自動起動と停止を実装する方法

目次1. Consulクラスタをデプロイする1. 準備3. Consulクラスタを作成する4. 管理...

MySQL ファントムリードとその排除方法の詳細な説明

目次トランザクション分離レベルファントムリーディングとは何ですか?ファントムリードを排除する方法要約...

JavaScript データのフラット化の詳細な説明

目次フラット化とは何か再帰トストリング減らすアンダーコア_.平坦化_。連合_。違い要約するフラット化...

自動的にフォーカスを取得する要素入力ボックスの実装

最近のプロジェクトでフォームを作成するときに、コメント ボックスまで自動的にスクロールし、コメント ...

Linux LVM 論理ボリューム構成プロセス (作成、増加、削減、削除、アンインストール) の詳細な説明

Linux LVM論理ボリューム構成プロセスの詳細な説明多くの Linux ユーザーは、オペレーティ...