テーブルページを作成するときに、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) を使用するための入門チュートリアル
目次コンポーネント通信の概要コンテンツ3つの方法まとめコンポーネントコミュニケーション - 父から息...
Apollo オープンソース アドレス: https://github.com/ctripcorp/...
1. Nginx サービス基盤Nginx (エンジン x) は、パフォーマンスの最適化のために特別...
mysqlはデータディレクトリ内のファイルをコピーしてデータを復元します背景: MySQL がクラッ...
UI コンポーネントを作成するときに、アニメーションを考慮しなければ、アニメーションを実現するのは非...
MySQL でテーブルを削除するのは非常に簡単ですが、削除コマンドを実行するとすべてのデータが消えて...
runlike を使用してコンテナの docker run 起動パラメータを表示します。 pipを...
MySQLの古いバージョンをアンインストールします(古いバージョンがない場合は、この手順をスキップし...
Centos にプロジェクトをデプロイするときに奇妙な問題が見つかりました。データベース接続で例外...
目次1. v-forループでは常にキーを使用する2. 特定のスコープ内でv-forループを使用する3...
ハッシュ結合ハッシュ結合は実行にインデックスを必要とせず、ほとんどの場合、現在のブロックネストループ...
ストレステストにログインする際には、多くの異なるユーザーが必要となり、データベースに新しいデータを追...
目次序文配列.isArrayコンストラクタインスタンスプロトタイプオブジェクト.プロトタイプ.toS...
最近、プロジェクトは環境を切り替え、WebLogic を Tomcat に置き換えました。途中で発生...
テーブルを美しくするために、行ごとに異なる境界線の色を設定できます。基本的な構文<TR 境界線...