td セルを結合した場合の td 幅の問題

以下の例では、名前が入っている td の幅が 60px のとき、2 行目の文字数が少ない場合は正常に表示されますが、2 行目の文字数が多い場合は異常な表示になります。

コードをコピー

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

<!DOCTYPE HTML>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312">
<title>123WORDPRESS.COM</title>
<スタイルタイプ="text/css">
.mTable{幅:200px;境界線:1px 実線 #666;境界線の折り返し:折り返し}
.mTable td{境界線:1px 実線 #666}
</スタイル>
</head>
<本文>
<テーブルの幅="200" セル間隔="0" セルパディング="0" クラス="mTable">
<tr>
<td width="60">名前:</td>
<td>誰か</td>
</tr>
<tr>
<td colspan="2">個人プロフィール</td>
</tr>
</テーブル>

<テーブルの幅="200" セル間隔="0" セルパディング="0" クラス="mTable">
<tr>
<td width="60">名前:</td>
<td>誰か</td>
</tr>
<tr>
<td colspan="2">個人プロフィール個人プロフィール個人プロフィール</td>
</tr>
</テーブル>
</本文>
</html>

解決策 1: (2 番目の列の幅も設定します td)

コードをコピー

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

<!DOCTYPE HTML>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312">
<title>123WORDPRESS.COM</title>
<スタイルタイプ="text/css">
.mTable{幅:200px;境界線:1px 実線 #666;境界線の折り返し:折り返し}
.mTable td{境界線:1px 実線 #666}
</スタイル>
</head>
<本文>
<テーブルの幅="200" セル間隔="0" セルパディング="0" クラス="mTable">
<tr>
<td width="60">名前:</td>
<td width="140">誰か</td>
</tr>
<tr>
<td colspan="2">個人プロフィール</td>
</tr>
</テーブル>

<テーブルの幅="200" セル間隔="0" セルパディング="0" クラス="mTable">
<tr>
<td width="60">名前:</td>
<td width="140">誰か</td>
</tr>
<tr>
<td colspan="2">個人プロフィール個人プロフィール個人プロフィール</td>
</tr>
</テーブル>
</本文>
</html>

解決策 2: (table-layout:fixed を設定する)

コードをコピー

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

<!DOCTYPE HTML>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312">
<title>123WORDPRESS.COM</title>
<スタイルタイプ="text/css">
.mTable{幅:200px;境界線:1px 実線 #666;境界線の折りたたみ:折りたたみ;テーブルレイアウト:固定}
.mTable td{境界線:1px 実線 #666}
</スタイル>
</head>
<本文>
<テーブルの幅="200" セル間隔="0" セルパディング="0" クラス="mTable">
<tr>
<td width="60">名前:</td>
<td>誰か</td>
</tr>
<tr>
<td colspan="2">個人プロフィール</td>
</tr>
</テーブル>

<テーブルの幅="200" セル間隔="0" セルパディング="0" クラス="mTable">
<tr>
<td width="60">名前:</td>
<td>誰か</td>
</tr>
<tr>
<td colspan="2">個人プロフィール個人プロフィール個人プロフィール</td>
</tr>
</テーブル>
</本文>
</html>

<<: MySQLクエリ文を書き換える3つの戦略

>>: Webデザインと制作のテスト問題と参考回答

td セルを結合した場合の td 幅の問題

in() の ID の順序に従った Mysql クエリ結果の順序の詳細な説明

OneProxy に基づいて MySQL の読み取り/書き込み分離と負荷分散を実装する

MySQL マスタースレーブレプリケーションの実践の詳細説明 - GTID ベースのレプリケーション

ウェブサイトを高速化する

Reactのようなフレームワークをゼロから作成する

Vue は Echarts をインポートして折れ線グラフを実現します

CentOS の Nginx 公式 Yum ソースの設定を詳しく解説

ウィンドウとLinuxプロジェクトを展開する際のLinuxファイルパスに問題はありません

Ant Design Blazor コンポーネントライブラリのルーティング再利用マルチタブ機能

JavaScript での正規表現の使用について詳しく学ぶ

推薦する

CentOS 7 に Percona Server+MySQL をインストールする

Thinkpad VMware に仮想マシンをインストールすると、「このホストは Intel VT-x をサポートしていますが、Intel VT-x は無効になっています」というメッセージが表示される (問題解決)

VSCode と SSH を使用したリモート開発

ReactでCSSをエレガントに書く方法

LeetCode の SQL 実装 (183. 注文をしたことがない顧客)

Docker に ElasticSearch 6.x をインストールする詳細なチュートリアル

Docker で Redis クラスターを素早く構築する方法の例

円形/扇形メニューを2分で実装する方法を教えます（基本バージョン）

Vue フロントエンドの Excel ファイルのエクスポートの詳細な実装計画

JS を使って CSS3 で丸い角を実装する方法

CSSを使用してTDのINPUTの幅を設定する

MySQL 5.7.27 winx64 のインストールと設定方法のグラフィックチュートリアル

大量のデータを含むエレメントのシャトルボックスで「すべて選択」をクリックするとスタックする問題の解決方法

Navicat PremiumでSQLファイルをインポートする方法

Linuxカーネルのアクセス制御セキュリティを強化する方法