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

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

推薦する

JavaScript ウェブページ入門開発詳細説明

パート3: ❤バックエンドデータ受信を見落とす3つの方法❤ (おすすめ集)パート 2: Web フォ...

ゲーム開発におけるサウンド処理にCocosCreatorを使用する方法

目次1. Cocos Creatorでのオーディオ再生の基本1. 基本2. 一般的な方法2. Coc...

MySQLのエンコードの不一致によって発生する可能性のある問題

ストアドプロシージャとコーディングMySQL ストアド プロシージャでは、テーブルとデータのエンコー...

HTML の表のフレームとルール属性の詳細な説明

テーブル タグの frame 属性と rules 属性は境界線の表示を制御できます。フレーム プロパ...

CSS3マスクレイヤーのくり抜き効果を実現するさまざまな方法

この記事では、マスク レイヤーの中空化を実現する 4 つの方法を紹介します。みんなと共有し、自分用の...

シンプルなHTMLとCSSの使い方の詳細な説明

HTML と CSS を含む JD.com のホームページの静的ページ効果を 3 日間で完成させます...

mysql5.7.24 バージョンのインストール手順と解凍時に発生した問題の概要

1. ダウンロード参考: 2. D:\MySQL\mysql-5.7.24 などの固定の場所に解凍し...

CSS を使用して物流の進行状況のスタイルを実装するためのサンプルコード

効果: CSS スタイル: <スタイル タイプ="text/css">...

Vue+Router+Element でシンプルなナビゲーションバーを実装する

このプロジェクトでは、Vue+Router+Element の具体的なコードを共有して、シンプルなナ...

HTML 固定タイトル列、タイトル ヘッダー テーブル固有の実装コード

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

npm 淘宝ミラー変更説明

1. トップレベルの使用法1. cnpmをインストールする npm i -g cnpm --regi...

Idea は、Web プロジェクトを開始するように Tomcat を設定します。グラフィック チュートリアル

tomcatの設定1. 実行構成をクリック 2. tomcat localを選択 3. tomcat...

Vueはユーザーログイン切り替えを実装します

この記事では、ユーザーのログイン切り替えを実現するためのVueの具体的なコードを例として紹介します。...

Win10 VM 仮想マシンに Mac OS10.14 を完璧にインストールする (グラフィック チュートリアル)

最近、Apple の記者会見を見てとても興奮したので、Mac システムを体験して Apple の素晴...

HTML を使用して IE8 および IE9 の互換表示モードを無効にするヒント

IE 8 以降では互換モードが追加され、これを有効にすると IE の下位バージョンでレンダリングされ...