テーブルページを作成するときに、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: ❤バックエンドデータ受信を見落とす3つの方法❤ (おすすめ集)パート 2: Web フォ...
目次1. Cocos Creatorでのオーディオ再生の基本1. 基本2. 一般的な方法2. Coc...
ストアドプロシージャとコーディングMySQL ストアド プロシージャでは、テーブルとデータのエンコー...
テーブル タグの frame 属性と rules 属性は境界線の表示を制御できます。フレーム プロパ...
この記事では、マスク レイヤーの中空化を実現する 4 つの方法を紹介します。みんなと共有し、自分用の...
HTML と CSS を含む JD.com のホームページの静的ページ効果を 3 日間で完成させます...
1. ダウンロード参考: 2. D:\MySQL\mysql-5.7.24 などの固定の場所に解凍し...
効果: CSS スタイル: <スタイル タイプ="text/css">...
このプロジェクトでは、Vue+Router+Element の具体的なコードを共有して、シンプルなナ...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
1. トップレベルの使用法1. cnpmをインストールする npm i -g cnpm --regi...
tomcatの設定1. 実行構成をクリック 2. tomcat localを選択 3. tomcat...
この記事では、ユーザーのログイン切り替えを実現するためのVueの具体的なコードを例として紹介します。...
最近、Apple の記者会見を見てとても興奮したので、Mac システムを体験して Apple の素晴...
IE 8 以降では互換モードが追加され、これを有効にすると IE の下位バージョンでレンダリングされ...