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デザインと制作のテスト問題と参考回答