IE6/7でtable幅が効かない

締切済

質問者：pikohitomi
質問日時：2014/04/03 16:06
回答数：2件

こんにちわ。

クライアントのサイトを作成しており、
table部分のバグが発見されました。
画像の通りなのですが、それぞれの幅を同じにしたいのですが、
IE6/7だけ狭くなったり広くなったりしています。
IE6/7は無視してきたのですが、クライアントから指摘され困っています。

どなたかこの現象を修正する方法がありましたらご教示ください。

table {
border-left:1px solid #C7C7C7;
border-top:1px solid #C7C7C7;
width:100%;
}

th {
border-bottom:1px solid #C7C7C7;
border-right:1px solid #C7C7C7;
width:165px;
table-layout:fixed;
padding:8px 18px;
background-color:#F2F2F2;
font-weight:bold;
}

td {
border-bottom:1px solid #C7C7C7;
border-right:1px solid #C7C7C7;
padding:8px 18px;
}

よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2014/04/04 11:59

とりあえず、サンプルをそのまま表示してみてください。

ウィンドウ幅を変えてみる。
なおthの行は
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="名称">Name</th>
＿＿＿＿＿<th abbr="要素">Related Elements</th>
＿＿＿＿＿<th abbr="タイプ">Type</th>
＿＿＿＿＿<th abbr="コメント">Comment</th>
＿＿＿＿</tr>
のほうがよいかも。
　その場合DOCTYPEは、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
になります。

＞上記を宣言していたのですがtransitionalはもうないでしょうか。
　HTML自体は『どのバージョンのHTMLも、コンテンツプロバイダの投資が無駄にならないよう、また短期間で文書が読み取り不能となったりすることがないよう、産業界の幅広い賛同を反映するようにされてきた。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』『過去との互換性のため、HTML 4 を解釈するツールについては、HTML 3.2 ([HTML32]参照)並びにHTML 2.0 ([RFC1866]参照)をもサポートすることを推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』のように過去への互換性がブラウザには求められていますから、使い続ける事はできます。
　しかし、1999年のHTML4.01の勧告のとき
★HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
推奨しない
　推奨しない要素・属性とは、新しい枠組みができたことによって、陳腐化したものを指す。推奨しない要素は、リファレンスマニュアルの各所で定義し、推奨しないことを明記する。
　推奨しない要素は、HTMLの将来のバージョンでは廃止になる可能性がある。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

★予告どおり、HTML5ではプレゼンテーションだけを目的とする要素、属性はすべて廃止されます。
＞> いまどき、さすがtransitinalはないでしょうから、
　の理由は、そういう意味です。サンプルをご覧になると文書構造しか書かれていないHTMLは極めてシンプルで「文書提供コストを低下でき、文書の改訂も容易になる( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」の意味がわかるかと・・

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。

まだまだ勉強不足の私です。

勉強になりました。

テーブルの方はまだ解決策が見つからずです。
なんとか修正しようと思います。

通報する

お礼日時：2014/04/07 09:56

No.1

回答者： ORUKA1951
回答日時：2014/04/03 16:37

DOCTYPE宣言で標準モードで動作してない。

⇒DOCTYPE スイッチ - Google 検索( https://www.google.co.jp/search?q=DOCTYPE%20%E3% … )

　いまどき、さすがtransitinalはないでしょうから、strictで簡単なサンプル
IE5以降は問題ないはずです。
★タブは＿に置換してあるので戻す。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　でチェック済みのHTML4.01strict+CSS2.1です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<table summary="価格表" border="1">
＿＿＿<tbody>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="名称">Name</th>
＿＿＿＿＿<th abbr="要素">Related Elements</th>
＿＿＿＿＿<th abbr="タイプ">Type</th>
＿＿＿＿＿<th abbr="コメント">Comment</th>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<td>abbr</td>
＿＿＿＿＿<td>TD, TH</td>
＿＿＿＿＿<td>%Text;</td>
＿＿＿＿＿<td>abbreviation for header cell</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<td>accept-charset</td>
＿＿＿＿＿<td>FORM</td>
＿＿＿＿＿<td>%Charsets;</td>
＿＿＿＿＿<td>list of supported charsets</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<td>accept</td>
＿＿＿＿＿<td>FORM, INPUT</td>
＿＿＿＿＿<td>%ContentTypes;</td>
＿＿＿＿＿<td>list of MIME types for file upload</td>
＿＿＿＿</tr>
＿＿＿</tbody>
＿＿</table>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>

この回答への補足

お返事頂きありがとうございました。

早速ORUKA1951さんの書いて下さった通りに変更したのですが、
変わらずでした。

質問と違うのですが・・

> いまどき、さすがtransitinalはないでしょうから、strictで簡単なサンプル
> IE5以降は問題ないはずです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …

上記を宣言していたのですがtransitionalはもうないでしょうか。
お答えいただいてからドキッとし色々なWEBサイトを見たのですが
transitinalが多かった気がするのですが・・。
勉強不足ですみません。