Discussion:
テーブルがはみ出す
(too old to reply)
YAMANEKO
2005-07-31 08:57:24 UTC
Permalink
Raw Message
お世話になります、やまねこと申します

paddingを指定したブロック<dd>の中に<table width="100%">を置くと、
Dreamweaver 7.0.1の表示では、テーブルが親ブロックを押し広げて
しまうのですが・・これは、CSSの仕様、なのでしょうか？
それとも、Dreamweaverのバグ？
いちおう、IEやFirefoxでは、親を押し広げることはないのですが・・

いちいちtableに実寸を指定するのも大変なので、
何かいい解決方法があるといいのですが・・。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<style type="text/css">
<!--
dl {
margin: 0px;
padding: 0px;
}
dt {
margin: 0px;
padding: 2px;
border: 1px solid #0000FF;
}
dd {
margin: 0px 0px 5px 0px;
padding: 2px 2px 2px 15px;
border: 1px solid #FF0000;
}
-->
</style>
</head>

<body>
<dl>
<dt>項目１</dt>
<dd>項目１詳細</dd>
<dt>項目２</dt>
<dd>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>項目２</td>
<td>表組み</td>
</tr>
</table>
</dd>
</dl>
</body>
</html>
Y.S
2005-08-05 01:25:53 UTC
Permalink
Raw Message
仕様ですかね？
この現象の仕組みを見てみると、margin、padding、borderのそれぞれの数値が
無視されたうえで、編集時の表示領域100％幅でテーブルが表示されています。
で、これがdd（dtも）の部分にwidthのサイズ指定を入れてみると、テーブルが入って

いなくても、margin、padding、borderの数値分押し広げています。
これはブラウザで見た場合でも同じです。

単純なグループ分けのように扱うなら、特に気にしなくても良いとは思いますが、
デザイン性重視と言うことであれば、キッチリ計算した上でサイズ指定を
しておく、或いはテーブルの中にddを入れた方が編集しやすいかも知れませんね。
Post by YAMANEKO
お世話になります、やまねこと申します
paddingを指定したブロック<dd>の中に<table width="100%">を置くと、
Dreamweaver 7.0.1の表示では、テーブルが親ブロックを押し広げて
しまうのですが・・これは、CSSの仕様、なのでしょうか？
それとも、Dreamweaverのバグ？
いちおう、IEやFirefoxでは、親を押し広げることはないのですが・・
いちいちtableに実寸を指定するのも大変なので、
何かいい解決方法があるといいのですが・・。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<style type="text/css">
<!--
dl {
margin: 0px;
padding: 0px;
}
dt {
margin: 0px;
padding: 2px;
border: 1px solid #0000FF;
}
dd {
margin: 0px 0px 5px 0px;
padding: 2px 2px 2px 15px;
border: 1px solid #FF0000;
}
-->
</style>
</head>
<body>
<dl>
<dt>項目１</dt>
<dd>項目１詳細</dd>
<dt>項目２</dt>
<dd>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>項目２</td>
<td>表組み</td>
</tr>
</table>
</dd>
</dl>
</body>
</html>
Loading...