テーブルの枠線
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>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
分かりました。ありがとうございました。