IE11でテーブルの枠線が表示されない問題の解決方法
- IE11でテーブルの枠線が表示されない問題の解決方法をご教授ください。
- 対応ブラウザがIE8からIE11という前提で、テーブルの枠線を表示させる方法を教えてください。
- IE11でテーブルの枠線が表示されない問題に遭遇しています。どうすれば解決できるでしょうか？
- ベストアンサー
テーブルの枠線
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>
- jg1wjz
- お礼率91% (148/162)
- CSS
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
styleの書き方が間違っています。 例として border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; 下2つは間違っています、この3つを書く場合は border-top: solid 1px #3d9f51; とするのが良いです。 他も同様に修正してください。
関連するQ&A
- テーブルに関する質問です。
テーブルに関する質問です。 wordpressでHPを作っているのですが、テーブルが思った通りの形にならない為 試しにhtmlドキュメントで同じテーブルを作ろうと試みたのですが やはり同じ現象が起き、思った通りのレイアウトにならないです。 一行目のテーブルと二行目のテーブルはくっつけて、 二行目の列のテーブルのセルとセルの間隔を1px空けてやりたいのですが (1)のwidth:0;の空きセルを作って、それをセルとセルの間に挿入することによって 間隔を空けるという方法は、どうやっても1pxではなく2pxの間隔になってしまい、 (2)の白いborderをセルの右側だけに表示させるという方法では、 Firefoxでは思った通りのレイアウトなのですが、 IE6で見た場合に一行目のセルに線が付きぬけて表示されてしまいます。 色によっては誤魔化かされて付き出てない様に見えるのですが。 どうしたら良いでしょうか？ よろしくお願いします。 (1) <HTML> <HEAD> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } --> </STYLE> </HEAD> <BODY> <table border="0"> <tbody> <td style="background-color:#b7a193; width: 300px; height: 30px; padding:0px" colspan="5"></td> <tr> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> <td style="background-color: #ffffff; width: 0px; height: 40px; border-collapse: collapse;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> <td style="background-color: #ffffff; height: 40px; width: 0px; border-collapse: collapse;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> </tbody> </table> </BODY> </HTML> (2) <HTML> <HEAD> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } --> </STYLE> </HEAD> <BODY> <table border="0"> <tbody> <td style="background-color: b7a193; width: 300px; height: 30px; padding:0px" colspan="3"></td> <tr> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> </tbody> </table> </BODY> </HTML>
- ベストアンサー
- CSS
- css テーブルについて
よろしくお願いします。 2だけを300pxと100pxに2分割にできないでしょうか。 <div class="aa"> <table> <tr> <th>1</th> <td>2</td> </tr> <tr> <th>1</th> <td>1</td> </tr> </table> </div> .aa table { width: 500px; height: 100px; border: 1px #000000 solid; border-collapse: collapse; } .aa th { width: 100px; border: 1px #000000 solid; } .aa td { width: 400px; border: 1px #000000 solid; }
- ベストアンサー
- CSS
- テーブル・セル枠線の色
下記のようにテーブルを組むと、IEでは1pxの赤いボーダーで表示されるのですが、 ネスケだとグレーの太い線になってしまいます。 どのように変えたらよいのでしょうか。 <TABLE border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FF5F8D" width="100%"> <TR> <TD width="50%"> </TD> <TD width="50%"> </TD> </TR> </TABLE>
- ベストアンサー
- HTML
- tableにtable。table同士の間隔を拡大
スクロールバーを付けるためにtable内にtableを入れました。 中のtableとtableの間隔を開けたいです。 言葉が少ないですが、その分画像で頑張って説明します。 お願いいたします。 <style type="text/css"> #test0{ cellpadding: 2; width: 518px; background-color : #fff; border:1px solid #333; border-spacing:0; } #start{ width: 495px; height: 230; border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } .center{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } #end{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #40ee22; } td.test1{ background-color: #000000; color: #333333; } td.test2 img{ margin: 10px; } .test3{ font-size: 12px; padding: 5px; } td.test4{ text-align: center; } </style> <table id="test0"> <tbody> <tr> <td> <DIV style="height:400px; overflow:auto;"> <table id="start"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table class="center"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table id="end"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> </div> </td> </tr> </tbody> </table>
- ベストアンサー
- HTML
- 枠線が表示されません
初歩的な質問ですみません。 以下のようなテーブルを組んでいるのですが 枠線が表示されません。 どこがおかしいのでしょうか？ 宜しくお願いします。 ==================================HTML================================== <html> <head> <link rel="stylesheet" href="test.css" type="text/css"> </head> <body> <table class="table1"> <tr> <th>左</th> <th>真ん中</th> <th>右</th> </tr> <tr> <td class="blue">1</td> <td class="blue">田中</td> <td class="blue">55</td> </tr> <tr> <td class="white">2</td> <td class="white">鈴木</td> <td class="white">42</td> </tr> <tr> <td class="blue">3</td> <td class="blue">斉藤</td> <td class="blue">20</td> </tr> </table> </body> </html> ==================================CSS================================== /*テーブル全体*/ .table1 { border-collapse: collapse; /* 枠線の表示方法 重ねる */ border: 2px #757575 solid; /* テーブル全体の枠線（太さ・色・スタイル）solid:実線 */ margin-top: 10px; /* 表示位置 */ margin-left: 25px; /* 表示位置 */ } /*テーブルの見出し部分*/ th { font-size:10pt; text-align:left; /*左寄せ*/ color:#888888; /*テキスト色*/ background-color:#B8B8B8; /*背景色*/ border-style: solid; /* 枠の種類 */ border-width: 0px 1px; /* 枠の幅 */ border-spacing: 0; /* 隣のセルとの間隔 */ } /*テーブルのデータ部分*/ td { font-size:10pt; text-align:left; /*左寄せ*/\ border-style: solid; /* 枠の種類 */ border-width: 0px 1px; /* 枠の幅 */ } .blue{ background-color: #CCCCFF; } /* セル色：青 */ .white{ background-color: #FFFFFF; } /* セル色：白 */ /*背景色と文字色*/ body { background-color: #969696; color: #000000; }
- 締切済み
- 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
- テーブル内widthでの改行処理がIEとFirefoxで異なる
テーブル内のtdに対してwidthを指定していますが、IEとFirefoxで表示が異なります。具体的には下記のコードにて、【文章１】が長い場合、IEではwidth:160pxで自動改行するのですが、Firefoxでは改行されず横に表示されてしまいます。 いちいち改行文字を入れるのはめんどうなのでFirefoxでも自動改行されるようにしたいのですが、何かうまい手をご存知の方、ご教示願います。 ＜スタイルシート＞ #contact_table table { width:600px; padding:auto; margin:auto; text-align:center; border-collapse:separate; } #contact_table tr { padding:auto; margin:auto; text-align:center; } #contact_table td { padding:5px; margin:5px; border-top:solid 2px #EEEEEE; border-left:solid 2px #EEEEEE; border-right:solid 2px #C0C0C0; border-bottom:solid 2px #C0C0C0; font-size:12px; font-weight:normal; color:#000000; text-align:left; line-height:1.5em; background:#DAEAF3; } #contact_table td.item { width:160px; white-space:nowrap; background: #000080; text-align:center; border-top:solid 2px #0000CC; border-left:solid 2px #0000CC; border-right:solid 2px #000033; border-bottom:solid 2px #000033; color:#FFFFFF; } ＜HTML＞ <div id="contact_table"> <table summary="お問い合わせ"> <tr> <td class="item">【文章１】</td> <td>【文章２】</td> </tr> <tr> <td class="item">【文章１】</td> <td>【文章２】</td> </tr> ・・・ </table> </div>
- ベストアンサー
- 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
- ＩＥでテーブル内のテキストが勝手に改行されます。
個人でサイトを運営しているのですが、 外部ＣＳＳをテーブルに適用するとＩＥとＦｉｒｅｆoxで表示が変わってしまい 困っています。問題は下記です。 テーブルに指定するＣＳＳは以下のようなものです。 table.1{ border-top:1px solid #666666 ; border-left:1px solid #666666 ; border-collapse:collapse; border-spacing:0; background-color:#ffffff; empty-cells:show; text-align:left; font-size: 10pt; padding:3px; } .1 th{ border-right:1px solid #666666 ; border-bottom:1px solid #666666 ; color:#330000; background-color:#996633; padding:0.1em 0.1em; text-align:center; } .1 td{ border-right:1px solid #666666 ; border-bottom:1px solid #666666 ; padding:8px 8px 8px 8px; line-height: 120%; } そして本文のＨＴＭＬです。 <table width="166" border="0" class="1"> <tr> <td colspan="2"><div align="center">テキストテキスト</div></td> </tr> <tr> <td>イメージ写真</td> <td>イメージ写真</td> </tr> <tr> <td width="76"><p>テキストテキストテキストテキストテキストテキストテキストテキスト</p></td> <td width="79"><p>テキストテキストテキストテキストテキストテキストテキストテキスト</p></td> </tr> </table> 以上のようなものです。 このようにするとＦｉｒｅｆｏｘではきちんと表示されるのですが、 ＩＥだとテキストの部分が４文字ほどで勝手に改行されてしまい、 かなり縦長のテーブルになってしまいます。 試行錯誤してみたのですが、全然できなくて本当に困っています。 もし解決策をご存知の方おられましたら、ぜひ教えていただければ幸いです。
- ベストアンサー
- HTML
- サイズ指定したテーブルを縦に並べるとセルがズレる
色々と試しているんですが解決できないので教えてください。 CSSで全く同じようにサイズ指定しているテーブルを縦に並べた時、同じようにサイズ指定しているはずなのに、IEではセルの内容（テキストの長さ）によってセルの幅が変わってしまいます。具体的に言うと、ショッピングカートの商品ページのようなものを作ろうとしているのですが、以下のようなソースです。 .menu-table{ width:500px; padding:0px; border-collapse:collapse; } .menu-title{ margin:0px; padding:5px; border:1px solid #ff9900; } .menu-img{ width:110px; margin:0px; padding:5px; border:1px solid #ff9900; } .menu-style1{ width:70px; margin:0px; padding:5px; border:1px solid #ff9900; } .menu-style2{ width:300px; margin:0px; padding:5px; } .menu-style3{ margin:0px; padding:5px; } <table width="0" border="0" cellspacing="0" cellpadding="0" class="menu-table"> <tr> <td colspan="3" class="menu-title">商品名</td> </tr> <tr> <td rowspan="4" class="menu-img"><img src="item.jpg" width="100" height="100" /></td> <td class="menu-style1">説明1</td> <td class="menu-style2">あいうえお</td> </tr> <tr> <td class="menu-style1">説明2</td> <td class="menu-style2">かきくけこ</td> </tr> <tr> <td class="menu-style1">価格</td> <td class="menu-style2">\1,000￥</td> </tr> <tr> <td colspan="2" class="menu-style3">あいうえおかきくけこさしすせそたちつてとなにぬねの</td> </tr> </table> こういうテーブルを縦にいくつか並べた時、例えば2つ目のテーブルが「あいうえお」のところに「あいうえおかき」と入力すると、「あいうえお」と入力したテーブルに比べて「説明1」のセル幅が狭くなってしまいます。Firefoxでは綺麗に揃うんですが、どうしてもIEではずれます。ボーダーの幅のぶんも計算に入れて幅を指定し直してもずれるんです。説明が下手すぎてうんざりかもしれませんが、どなたか解決策が分かれば教えてください。
- 締切済み
- CSS
お礼
outbrave さん、 今確認できました！ 大変助かりました。 有難うございます。