- 締切済み
テーブル幅が固定できない
テーブル幅が固定できないく困っています。 ドリームウィーバー上では意図した指定幅で表示されているのですが、ブラウザで確認してみると、両端の方のセルが極端に圧縮（幅が短くなる）され、それ以外のセルも圧縮されてしまいます。 画面を横スクロールしなければならないほどに横長のテーブルを作成するとこの現象が起きます。 colspanを使っているからいけないのでしょうか？ それともほかに原因があるのでしょうか？ このようなときの解決方法を教えてください。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
回答No.1
生成されている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"> <!-- TemplateBeginEditable name="doctitle" --> <title>○○</title> <meta name="keywords" content="○○"> <meta name="description" content="○○"> <!-- TemplateEndEditable --> <link href="../style-hyo.css" rel="stylesheet" type="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --> </head> <body> <!--▼ヘッダーここから▼--> <div id="header-hyo"> <div id="header_box_l"> <h1>ああああ</h1> </div> </div> <!--▲ヘッダーここまで▲--> <!--▼mainここから▼--> <div id="main-hyo"> <!-- TemplateBeginEditable name="EditRegion1" --> <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> <!-- TemplateEndEditable --> </div> <!--▲mainここまで▲--> <!--▼フッターーここから▼--> <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; }