- ベストアンサー
テーブルのレイアウトに関する問題
- wordpressで作成したHPのテーブルが思った通りの形にならないため、htmlドキュメントで同じテーブルを作り直したが同じ現象が起きた。
- テーブルのセルとセルの間隔を1pxにする方法がうまくいかず、2pxの間隔になってしまう。
- 一部のブラウザ（Firefox）では思った通りのレイアウトになるが、IE6では一行目のセルに線が付き抜けて表示されてしまう。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- テーブルの枠線
IEブラウザのバージョンにより、表示が変わることはわかっているのですが どうしても解決できないので質問させていただきます。 対応ブラウザがIE8からIE11という前提なので、まずはIE8で試してみました。 きれいに表示できました。 が、IE11で表示したら、見出しは枠線が表示されました。 でも、中の罫線が表示されません。（画像添付） IE9、IE10はソフトを入れ直しが必要なので、また未確認です。 <meta>タグを入れてもダメでした。（IE=edge） IE8を捨ててもよいので、IE11で枠線を表示させるにはどうしたらよいのか、 ご教授願えないでしょうか？ widthの指定もしているし、border-styleも記述しているつもりですが IE11では何が足りないのか、わかりません。 以下にソースコードを記載しますので よろしくお願いいたします。 ※まだdebug中なので、罫線以外につきましては無視願います。 <html> <head> <style type="text/css"> #midashi { border:2px solid #ffffff; border-collapse:collapse; } #table1 { border:2px solid #3d9f51; border-collapse:collapse; } #table0 { border:2px solid #83ca51; border-collapse:collapse; float:left; margin-right:-3px; } #table1 .td0{ width:15px; height:20px; border: none; text-align:left; font-size:80%; } #table1 .td1{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "dotted"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "solid"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2bg{ background-color:#83ca51; } #table0 .td3{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#83ca51; border-collapse:collapse; text-align:center; font-size:80%; } #table0 .td3non{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#ffffff; border-collapse:collapse; text-align:center; font-size:80%; } </style> </head> <body> <table id="table0"> <script type="text/javascript"> //**************************************************************************** //--- 番号 for(i=0; i<9; i++){ document.write('<tr>'); if( i == 0){ document.write('<td class="td3non"> </td>') }else{ document.write('<td class="td3">部屋' + i + '</td>') } document.write('</tr>'); } //--- //**************************************************************************** </script> </table> <table id="table1"> <script type="text/javascript"> //**************************************************************************** //--- 見出し document.write('<tr>'); for(j=0; j<48; j++){ // 30分単位の一日分 if( j%2 == 1){ document.write('<td class="td2 td2bg"></td>') // 時間表示無し }else{ document.write('<td class="td0 td2bg">' + (j/2) + '</td>') // 時間表示有り } } document.write('</tr>'); //--- //**************************************************************************** //**************************************************************************** //--- 時間テーブル for(i=0; i<8; i++){ // i:部屋の数 document.write('<tr>'); for(j=0; j<45; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2"></td>') // solid }else{ document.write('<td class="td1"></td>') // dotted } } for(j=0; j<3; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2" style="font-size:50%;text-align:center;">・</td>') // solid }else{ document.write('<td class="td1" style="font-size:50%;text-align:center;">・</td>') // dotted } } document.write('</tr>'); //--- //**************************************************************************** } </script> </table> </body> </html>
- ベストアンサー
- CSS
- CSSでテーブルボーダーを表示させたいのですが・・
スタイルシートを使用したテーブルのボーダー表示について質問です。 スタイルシートで下記テーブルボーダー表示設定をしたところ、 IEでは表示されるのですが、Netscape7.0ではボーダーが全く表示されません。 table.01 {FONT-SIZE: 12px; border-collapse : collapse ; border-width : 1px 0 0 1px ; border-style : solid ; border-color : #37503D ; background-color:#FAFFFB;} table.01 td {border-width : 0 1px 1px 0 ; border-style : solid ; padding : 5px ; line-height:120%;} 現在調べているところですが、お解りになるかたがいらっしゃれば是非教えていただけないでしょうか。 どうぞ宜しくお願い致します。
- ベストアンサー
- HTML
- cssでテーブルで細い線
スタイルシートを使って 1ピクセルの細い線にしようと、 サンプルのように以下のようにしてみましたが 中の線（td？）が二重になってしまいます 一線にするのにどのようにすればイイですか？ ―――――――― .table2 { width: 400px; /* テーブルの横幅 */ border-collapse: collapse; /* 枠線の表示方法 */ border: 1px #1C79C6 solid; /* テーブル全体の枠線（太さ・色・スタイル） */ background-color: #FFFFFF; /* 背景色 */ } .table2 TD { border: 1px #1C79C6 collapse; /* セルの枠線（太さ・色・スタイル） */ } ―――――――――――――― <TABLE CLASS="table2"> <TR> <TD>WebデザインA</TD> <TD>WebデザインB</TD> </TR> <TR> <TD>WebデザインC</TD> <TD>WebデザインD</TD> </TR> </TABLE>
- ベストアンサー
- CSS
- テーブルの上下線を消したい
タイトル通り、テーブルの上下だけの線を消したいのですが、 どのように書けば消えるのでしょうか？ 一応今のものは <TABLE border="0" width="290" bgcolor="#ffffff" cellspacing="1" cellpadding="10" style="border:dotted 1px #000000"> <TBODY> <TR><TD valign="top" align="right" width="290" bgcolor="#ffffff" height="800"> <P> </P><p> </p> <DIV align="right"> ○○○ </DIV> </TD> </TR> </TBODY> </TD> </TR> </TBODY> </TABLE> です。お願いします。
- ベストアンサー
- HTML
- テーブルを作ったんですが…
はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSを使った丸ナンバー付きテーブルの挿入
HTMLで作成した丸ナンバー付きテーブルをスタイルシートを使って挿入しようと思っているのですが、肝心の数字の部分が真っ白になってしまいました。関係しそうなところだけ抜き出してみました。 （↓headの中に書いてある） body {background-color: white; background-image: url(dolp2.gif); color: #000000} table, td {width: 800px; border: 2px #C0C0C0 solid; border-collapse: collapse; background-color: #ffffff;} （↓body以下に書いてある） <div><Table border="0"><Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> １ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい１＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ２ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい２＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ３ </Td></Tr></Table></div> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい３＝＝＝ </Td></Tr></Table> このようなタイプのものはheadやcssにあげたほうがいいのでしょうか？ 最初はこのままbodyのなかに収めておこうかと思っていたのですが、上記のような事態になってしまったのでどうしたらいいのか困っています。 HTML初心者なので、なにとぞ宜しくお願いします。
- ベストアンサー
- HTML
- テーブルの中にiframe
テーブルの中にiframeをしているのですが どうしてもボタンが右側に少しはみ出ますし iframeは縦400pxを超えるページを表示すると 縦スクロールバーが表示されますが それも右側にはみ出ます。 どうにか800pxの中に収まらないものでしょうか？ また、ボタンのボーダを下記ソースでは消していますが デフォルトで表示される立体感のあるボタンのまま 800pxの中に収めたいです。 HTML5、CSS2.1です。 ご相談お願いします。 <table> <tr style="width: 800px; height: 50px"> <td><input type="button" value="1"/></td> <td><input type="button" value="2"/></td> <td><input type="button" value="3"/></td> <td><input type="button" value="4"/></td> <td><input type="button" value="5"/></td> </tr> <tr style="width: 800px; height: 400px"> <td colspan="5" style="width: 800px; height: 400px"> <iframe src="hoge.htm"></iframe> </td> </tr> <tr style="width: 800px; height: 50px"> <td colspan="5" style="width: 800px; height: 50px"> <p>hoge</p> </td> </tr> </table> ------------------------------------------------------------ table { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } tr td { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } input { border-style: none; border-width: 0px; padding: 0px; margin: 0px; color: Red; width: 160px; height: 50px; font-size: 20px; font-family: HGS明朝B; background-color: transparent; } iframe { padding: 0px; margin: 0px; border-style: none; border-width: 0px; background-color: transparent; width: 800px; height: 400px; }
- ベストアンサー
- HTML
- 表の作成をスタイルシートで
皆さんはHTMLで表を作成する際、どのように作成していますか？ 私はTableタグとスタイルシートを使っているのですが、これをスタイルシートのみで 作成できないでしょうか。 例えば以下のような表で、■部分は他のセルと背景色を変えます。 ■□□ ■□□ ■□□ 通常私がやっている方法は、tableタグに下記スタイル「tb01」を、タイトル部分には 「td.title」を設定を設定しています。 -----------------HTML-------------------------- <table width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <td class="title">6月7日</td> <td>text</td> <td>text</td> <td>text</td> </tr> <tr> <td class="title">6月8日</td> <td>text</td> <td>text</td> <td>text</td> </tr> </table> ---------------------------------------------------------- -----------------スタイルシート-------------------------- .tb01 {FONT-SIZE: 12px; border-collapse : collapse ; border-width : 1px 0 0 1px ; border-style : solid ; border-color : #CDCDCD ; ; width:350px; background-color:#FFFFFF; } table.tb01 td {border-width : 0 1px 1px 0 ; border-style : solid ; padding : 7px ; line-height:120%; border-color : #CDCDCD ; } td.title {background-color:#ECECEC; } ---------------------------------------------------------- スタイルシートのみでは無理でも、もっと良い方法があれば 是非教えてください。
- ベストアンサー
- HTML
- テーブル枠の初歩的なことで教えてください
CSSでテーブルを作成した時の事で二つ質問おねがいします 1. #box { width:800px; height:100px; border: 1px solid #000000; } とした時の大きさについて ボーダーを含めた大きさが800pxで内側の領域が798pxなのか ボーダーの内側が800pxでボーダーを含めて802pxなのか 2. #left{ width:200px; height:80px; float:left; background-color:#FFFFFF; border: 1px solid #000000; } #right{ width:600px; height:80px; float:right; background-color:#FFFFFF; border: 1px solid #000000; } 質問1の中に質問2の物を入れようとすると4px？分飛び出してしまうということでしょうか？ それともボーダー同士は重なり合い同じ大きさになるのでしょうか？ よろしくお願いします
- 締切済み
- HTML
- ウィンドウ全体をテーブルで表示するには？
できればウィンドウ全体をテーブルにする方法を教えて欲しいです。 左右上下に余白がなく、ウィンドウの大きさと同じ大きさでテーブルが表示される様にしたいのですが、下記のタグをどうさわっても余白ができてしまいます…。 何処が間違いなのか教えて頂けると有り難いです。 下手ですがイメージもかいてみたので見てみて下さい。 分かり辛い説明で申し訳ありませんが、よろしくお願いします。 【HTML】 <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td>たいとる</td></tr> <tr><td class="menu_td"><ul class="menu">めにゅー</ul></td></tr></table> 【CSS】 body{ background-image:url(＊＊＊); background-repeat: repeat; } .menu_td{ padding-left:20px; height:20px; background-color:#fff; border-top:1px solid #ccc; border-bottom:1px solid #ccc; filter:alpha(opacity=75); -moz-opacity:0.75; } .menu{ margin:0px; padding:0px; list-style-type:none; } .menu li{ width:100px; height:20px; line-height:20px; float:left; } .menu li a{ padding-left:15px; height:20px; line-height:20px; background-image:url(＊＊＊); background-position:0% 50%; background-repeat:no-repeat; display:block; } .menu li a:hover{ background-color:#efefef; } table{ border-collapse: collapse; border: 0px #999999 solid; color: #999999; font-size: 9pt; font-family: Verdana,Osaka,'MS UI Gothic'; } ul{ margin:0px; padding:0px 0px 0px 15px; list-style-type:circle; } よろしくお願いします。
- 締切済み
- CSS
- 印字に線が入るトラブルやカッターの下に紙くずが溜まる問題にお困りですか？ブラザー製品のクリーニングテープを使用することで解決できます。
- Windows11で利用しているQL-820NWBプリンターの印字に線が入る問題に悩んでいます。また、カッターの下に紙くずがたまっているため、取り除く方法も知りたいです。
- ブラザー製品のQL-820NWBプリンターで印字に線が入るトラブルが発生し、カッターの下にも紙くずがたまっています。クリーニングテープを使用して問題を解消する方法を教えてください。
お礼
こんばんわ。 とても判り易い説明とソースコードありがとうございます！ こんなに早く回答を頂けているとは思いませんでした。 borderのpx分、全体のセルのサイズも増やさなければならないのですね。 無事、HPにも適用する事が出来、IE6でもレイアウト崩れしなくなりました。 重ね重ね感謝です。