-1

HTMLテーブルを作成し、次のCSSを使用して必要に応じて境界線のスタイルを設定しました。

  1. 一番上の行と列は1つの色になり、テーブルの残りの部分はストライプの代替行の色になります。

  2. 各セル上の通常の単一の黒い境界線

これが私のCSSです：

#functionMatrixTable td
{
    border-collapse: collapse;
    border-width: 1px;
    border-color: Black;
    border-style: solid;
}

#functionMatrixTable th
{
    border-collapse: collapse;
    border-width: 1px;
    border-color: Black;
    border-style: solid;
}

#functionMatrixTable tbody tr.odd th, tbody tr.even th {
    background-color: #D8D8D8;
}


#functionMatrixTable tr.odd td{
    background-color: #ffffff;
    padding: 4px;
}

#functionMatrixTable tr.even td {
background-color: #CDE0F6;
    padding: 4px;
}

#functionMatrixTable th
{
    padding: 4px;
    background-color: #D8D8D8;
    color: #787878;
}

Firefoxの奇妙な問題は、テーブルの半分の周りに境界線が表示され、残りの部分には境界線が表示されないことです。これがサンプル画像です。IE8では問題ないようです。私がここで間違っていることについて何か考えはありますか？

Firefoxでの私のHTMLテーブルのスクリーンショット。セルをクリックすると、境界線が表示されます。なんで？

代替テキストhttp://img40.imageshack.us/img40/5126/htmltable.png

4

1 に答える 1

1

そのスクリーンショットに基づいて、HTMLを生成するコードのどこかにバグがあると思います。テーブルのHTMLの形式が正しくないと言えます。また、提供したサンプルCSSは不完全なようです。

次のサンプルを試してみましたが（CSSをいくつか変更して）、Firefoxですべての要素の周囲に境界線があるテーブルが正しくレンダリングされました（申し訳ありませんが、IEではテストできません）。

<html>
<head>
<style type="text/css">

#functionMatrixTable
{
  border-collapse:collapse;
  border-width:1px;
  border-color: Black;
  border-style: solid;
}

#functionMatrixTable td, th
{
  border-collapse:collapse;
  border-width:1px;
  border-color: Black;
  border-style: solid;
}

#functionMatrixTable tr.odd td{
  background-color: #ffffff;
  padding:4px;
}

#functionMatrixTable tr.even td {
  background-color: #CDE0F6;
  padding:4px;
}

#functionMatrixTable th
{
  padding:4px;
  background-color:#D8D8D8  ;
  color:#787878 ;
}
</style>
</head>
<body>
<table id="functionMatrixTable">
<tr>
<th>AAA</th>
<th>BBB</th>
</tr>
<tr class="odd">
<td>A</td>
<td>B</td>
</tr>
<tr class="even">
<td>C</td>
<td>D</td>
</tr>
<tr class="odd">
<td>A</td>
<td>B</td>
</tr>
<tr class="even">
<td>C</td>
<td>D</td>
</tr>
<tr class="odd">
<td>A</td>
<td>B</td>
</tr>
<tr class="even">
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>

テーブルが静的HTMLの場合、上記のようなものはFirefoxで問題なくレンダリングされるはずです。テーブルをその場でレンダリングしている場合、使用している方法はFirefoxと互換性がない可能性があります。たぶんJavaScriptを使っていますか？

于 2010-01-05T06:05:49.610 に答える