テーブル幅が固定できない

解決済

質問者：katsunof
質問日時：2009/11/11 23:20
回答数：1件

テーブル幅が固定できないく困っています。

ドリームウィーバー上では意図した指定幅で表示されているのですが、ブラウザで確認してみると、両端の方のセルが極端に圧縮（幅が短くなる）され、それ以外のセルも圧縮されてしまいます。

画面を横スクロールしなければならないほどに横長のテーブルを作成するとこの現象が起きます。

colspanを使っているからいけないのでしょうか？
それともほかに原因があるのでしょうか？

このようなときの解決方法を教えてください。

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yyr446
回答日時：2009/11/12 10:37

生成されているHTMLソースとCSSソースを提示しないと、的確なアドバイス

は得られないでしょう。ドリームウィーバーがどのようなコードを生成
しているか知りませんが、<table>や<td>のwidth指定の方法は様々あるし、
style="table-layout:fixed;"なんてのもあり、ブラウザーによっても自動調
整の機能が異なるので、びしっと列幅を固定したい時は、コード手打ち
で指定するしか無いのでは。

この回答への補足

具体的にはこのような感じです。どうでしょう？

HTMLコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>○○</title>
<meta name="keywords" content="○○">
<meta name="description" content="○○">

<link href="../style-hyo.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

</head>
<body>


<div id="header-hyo">
<div id="header_box_l">
<h1>ああああ</h1>
</div>
</div>



<div id="main-hyo">

<table>
<tr>
<th scope="col">ああ</th>
<th scope="col">ああ</th>
<th scope="col">ああ</th>
<th scope="col">ああ</th>
<th scope="col">ああ</th>
<th scope="col">ああ</th>
<th scope="col">ああ</th>
<th scope="col">ああ</th>
<th scope="col">ああ</th>
<th scope="col">ああ</th>
<th scope="col">ああ</th>
<th scope="col">ああ</th>
<th scope="col">ああ</th>
<th scope="col">ああ</th>
<th scope="col">ああ</th>
</tr>
<tr>
<th scope="row">ああ</th>
<td>ああ</td>
<td>ああ</td>
<td>ああ</td>
<td>ああ</td>
<td>ああ</td>
<td>ああ</td>
<td>ああ</td>
<td>ああ</td>
<td>ああ</td>
<td>ああ</td>
<td>ああ</td>
<td>ああ</td>
<td>ああ</td>
<td>ああ</td>
</tr>
</table>

</div>



<div id="footer-hyo">
ああああ
</div>


</body>
</html>

CSSコード

@charset "utf-8";

/* リセット */

body, h1, h2, h3, h4, h5, h6, dl, dt, dd, table, th, td, img {
margin: 0;
padding: 0;
border: none;
font-style: normal;
font-weight: normal;
font-size: 100%;
text-align: left;
}

p {
padding: 0;
border: none;
font-style: normal;
font-weight: normal;
font-size: 100%;
text-align: left;
margin-top: 0;
margin-right: 0;
margin-bottom: 15px;
margin-left: 0;
}

/* 全般 */

body {
font-family: "ＭＳＰゴシック";
font-size: 14px;
color: #333333;
line-height: 25px;
width: 3000px;
}

/* テーブル全般 */

table {
border-collapse:collapse;
margin-bottom: 15px;
table-layout: fixed;
}

td {
font-size: 13px;
line-height: 14px;
padding: 5px;
border: 1px solid #CCC;
width: 100px;
table-layout: fixed;
text-align: center;
}

th {
font-size: 13px;
line-height: 14px;
padding: 5px;
border: 1px solid #CCC;
table-layout: fixed;
text-align: center;
}

/* ヘッダー */

#header-hyo {
height: 100px;
width: auto;
background-color: #4C95D9;
padding-left: 20px;
}

#header_box_l {
float: left;
text-align: left;
margin-right: 20px;
margin-top: 33px;
width: 371px;
}

/* メイン */

/* メイン＿アライン */

.text-c {
text-align: center;
}

.text-r {
text-align: right;
}

.text-l {
text-align: left;
}

/* フッター */

#footer-hyo {
height: 50px;
background-color: #4c95d9;
line-height: 50px;
margin-bottom: 0px;
font-size: 12px;
color: #FFF;
padding-left: 20px;
text-align: left;
}