同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象
同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象
まったくの初心者ですが、テンプレートを編集してホームページを作りました。
しかし、別の環境で見たところ、テーブルの表示が明らかにおかしいことに気づきました。
（Lunascapeというブラウザで、３種類のエンジンが選べるので他のエンジンにしてみたのです）
問題を極力単純化しようと余計な文章を省いたHTMLを用意しましたが、結果は変わりませんでした。
Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせるとTridentで見たときにタイトルの幅が広すぎて間抜けなのです。
現状、この重大なエラーを残したまま公開している状態のため、急ぎ直したいのです。
画像は実行したときの症状を、下にはそのソースを載せます。
アドバイス、回答をよろしくお願いします。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>テスト</title>
</head>
<body>
<style type="text/css">
<!--
table {
border-collapse: collapse; border-spacing: 0;
width: 60%;
margin-bottom: 30px;
border: 1px solid #DDD;
table-layout:fixed;
}
th {
border: 1px solid #DDD;
color: #333;
padding: 10px 20px;
}
td {
border: 1px solid #DDD;
color: #333;
padding: 5px;
}
.title{ width:12em;}
.compose,.long{ width:4em;text-align:center;}
.value{ width:6em;text-align:center;}
th.genre { background: #E5F2F8;}
-->
</style>
<table>
<tr><th class="title">タイトル</th><td class="long">こうもく１</td><td class="value"><span class="d">こうもく２</span></td><td>こうもく３は大切なこうもくです。ほんとうです。</td></tr>
<tr><th class="title">タイトル</th><td class="long">こうもく１</td><td class="value"><span class="d">こうもく２</span></td><td>こうもく３は大切なこうもくです。ほんとうです。</td></tr>
</table>
</body>
</html>
お礼
返事が大変遅くなりすみません。おかげでできました。 table-layout以外にword-breakもよさそうでしたが、IEしか有効ではなかったため、最終的にtable-layout: fixedを使うことにしました。 本当にありがとうございました。