tdセルを結合する際のtd幅の問題
2022-01-28 19:10:41
以下の例では、名前があるtdの幅が60pxのとき、2行目の文字数が少なければ正常に表示されますが、2行目の文字数が多いと正常に表示されません。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Script House</title>
<style type="text/css">
.mTable{width:200px;border:1px solid #666;border-collapse:collapse}
.mTable td{border:1px solid #666}
</style>
</head>
<body>
<table width="200" cellspacing="0" cellpadding="0" class="mTable">
<tr>
<td width="60">Name:</td>
<td>So-and-so</td>
</tr>
<tr>
<td colspan="2">Personal profile</td>
</tr>
</table>
<table width="200" cellspacing="0" cellpadding="0" class="mTable">
<tr>
<td width="60">Name:</td>
<td>So-and-so</td>
</tr>
<tr>
<td colspan="2">Personal ProfilePersonal ProfilePersonal Profile</td>
</tr>
</table>
</body>
</html>
解決策1：（2つ目のtdカラムにも幅を設定する）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Script House</title>
<style type="text/css">
.mTable{width:200px;border:1px solid #666;border-collapse:collapse}
.mTable td{border:1px solid #666}
</style>
</head>
<body>
<table width="200" cellspacing="0" cellpadding="0" class="mTable">
<tr>
<td width="60">Name:</td>
<td width="140">So-and-so</td>
</tr>
<tr>
<td colspan="2">Personal profile</td>
</tr>
</table>
<table width="200" cellspacing="0" cellpadding="0" class="mTable">
<tr>
<td width="60">Name:</td>
<td width="140">So-and-so</td>
</tr>
<tr>
<td colspan="2">Personal ProfilePersonal ProfilePersonal Profile</td>
</tr>
</table>
</body>
</html>
解決策2：（set table-layout:fixed)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Script House</title>
<style type="text/css">
.mTable{width:200px;border:1px solid #666;border-collapse:collapse;table-layout:fixed}
.mTable td{border:1px solid #666}
</style>
</head>
<body>
<table width="200" cellspacing="0" cellpadding="0" class="mTable">
<tr>
<td width="60">Name:</td>
<td>So-and-so</td>
</tr>
<tr>
<td colspan="2">Personal profile</td>
</tr>
</table>
<table width="200" cellspacing="0" cellpadding="0" class="mTable">
<tr>
<td width="60">Name:</td>
<td>So-and-so</td>
</tr>
<tr>
<td colspan="2">Personal ProfilePersonal ProfilePersonal Profile</td>
</tr>
</table>
</body>
</html>
コピーコード
コードは以下の通りです。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Script House</title>
<style type="text/css">
.mTable{width:200px;border:1px solid #666;border-collapse:collapse}
.mTable td{border:1px solid #666}
</style>
</head>
<body>
<table width="200" cellspacing="0" cellpadding="0" class="mTable">
<tr>
<td width="60">Name:</td>
<td>So-and-so</td>
</tr>
<tr>
<td colspan="2">Personal profile</td>
</tr>
</table>
<table width="200" cellspacing="0" cellpadding="0" class="mTable">
<tr>
<td width="60">Name:</td>
<td>So-and-so</td>
</tr>
<tr>
<td colspan="2">Personal ProfilePersonal ProfilePersonal Profile</td>
</tr>
</table>
</body>
</html>
解決策1：（2つ目のtdカラムにも幅を設定する）
コピーコード
コードは以下の通りです。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Script House</title>
<style type="text/css">
.mTable{width:200px;border:1px solid #666;border-collapse:collapse}
.mTable td{border:1px solid #666}
</style>
</head>
<body>
<table width="200" cellspacing="0" cellpadding="0" class="mTable">
<tr>
<td width="60">Name:</td>
<td width="140">So-and-so</td>
</tr>
<tr>
<td colspan="2">Personal profile</td>
</tr>
</table>
<table width="200" cellspacing="0" cellpadding="0" class="mTable">
<tr>
<td width="60">Name:</td>
<td width="140">So-and-so</td>
</tr>
<tr>
<td colspan="2">Personal ProfilePersonal ProfilePersonal Profile</td>
</tr>
</table>
</body>
</html>
解決策2：（set table-layout:fixed)
コピーコード
コードは以下の通りです。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Script House</title>
<style type="text/css">
.mTable{width:200px;border:1px solid #666;border-collapse:collapse;table-layout:fixed}
.mTable td{border:1px solid #666}
</style>
</head>
<body>
<table width="200" cellspacing="0" cellpadding="0" class="mTable">
<tr>
<td width="60">Name:</td>
<td>So-and-so</td>
</tr>
<tr>
<td colspan="2">Personal profile</td>
</tr>
</table>
<table width="200" cellspacing="0" cellpadding="0" class="mTable">
<tr>
<td width="60">Name:</td>
<td>So-and-so</td>
</tr>
<tr>
<td colspan="2">Personal ProfilePersonal ProfilePersonal Profile</td>
</tr>
</table>
</body>
</html>
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン