テーブルとセルの境界線の両方が表示されているはずの非常に単純なテーブルがあります。これは Chrome と IE では正常に機能しますが、Firefox ではテーブルの境界線のみが表示され、セルの境界線は表示されません。HTMLは次のとおりです。
<table border = "1" class ="MyTable">
<tr>
<td class = "c1"></td>
<td class = "c2"></td>
<td class = "c3"></td>
<td class = "c4"></td>
<td class = "c5"></td>
<td class = "c6"></td>
<td class = "c7"></td>
<td class = "c8"></td>
<td class = "c9"></td>
<td class = "c10"></td>
</tr>
</table>
(すべての td クラスは、後で javascript で参照するためにそこにありますが、この問題には関係ありません。または、少なくとも私はそうは思いません)
CSS は次のとおりです。
table.MyTable {
margin-left: 10%;
}
table.MyTable td
{
width: 20px;
height:30px;
border: 4px solid black;
}
私は1)テーブルクラスの代わりにテーブルIDを使用してみました。2) <table border ="1" >
HTML から削除し、代わりに CSS にスタイリング情報を追加します。3) CSS コードを個別の border-style、border-color、および border-width コマンドに分割します。いずれの場合も、コードは Chrome と IE では正常に表示されますが、Firefox では表示されません。
参考までに、これは次のようになります (Chrome の場合):
Firefox では次のように表示されます。