Обычная граница HTML-таблицы в Firefox выглядит очень странно - PullRequest
Новая
       18

Обычная граница HTML-таблицы в Firefox выглядит очень странно

0 голосов
/ 05 января 2010

Я создал таблицу HTML и использовал следующую CSS , чтобы оформить границу так, как я хотел:

  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. есть идеи, что я здесь делаю не так?

Скриншот моей HTML-таблицы в Firefox. Когда я щелкаю в ячейке, появляется граница. Почему?

альтернативный текст http://img40.imageshack.us/img40/5126/htmltable.png

1 Ответ

1 голос
/ 05 января 2010

Я думаю, что у вас есть ошибка где-то в коде, который генерирует ваш 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?

...