常规HTML表格边框在Firefox中显示得非常奇怪_Html_Firefox_Css Tables

常规HTML表格边框在Firefox中显示得非常奇怪

html firefox

常规HTML表格边框在Firefox中显示得非常奇怪,html,firefox,css-tables,Html,Firefox,Css Tables,我创建了一个表，并使用以下命令设置边框的样式：顶部的行和列为一种颜色，表的其余部分为条纹或其他行颜色每个单元格上有规则的黑色边框这是我的CSS： #functionMatrixTable td { border-collapse: collapse; border-width: 1px; border-color: Black; border-style: solid; } #functionMatrixTable th { border-coll

我创建了一个表，并使用以下命令设置边框的样式：

顶部的行和列为一种颜色，表的其余部分为条纹或其他行颜色

每个单元格上有规则的黑色边框

这是我的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表格的屏幕截图。在单元格中单击时，将显示边框。为什么?

我认为生成HTML的代码中有一个bug，根据屏幕截图，我认为您的表格HTML格式不正确。此外，您提供的示例CSS似乎不完整

我刚刚尝试了以下示例（进行了一些CSS修改），它在firefox中正确地呈现了一个表，所有元素周围都有边框（对不起，我无法在IE中测试）：


#函数矩阵可压缩
{
边界塌陷：塌陷；
边框宽度：1px；
边框颜色：黑色；
边框样式：实心；
}
#函数矩阵可压缩td，th
{
边界塌陷：塌陷；
边框宽度：1px；
边框颜色：黑色；
边框样式：实心；
}
#functionMatrixTable tr.odd td{
背景色：#ffffff；
填充：4px；
}
#functionMatrixTable tr.偶数td{
背景色：#CDE0F6；
填充：4px；
}
#函数矩阵
{
填充：4px；
背景色：#D8D8D8；
颜色：#787878；
}
AAA
BBB
A.
B
C
D
A.
B
C
D
A.
B
C
D

如果您的表是静态HTML，那么在Firefox中呈现上述内容应该没有问题。如果您正在动态呈现表，那么您使用的方法很可能与Firefox不兼容。你可能正在使用javascript吗？

是的。我有，而不是它发生了。：）很高兴你找到了它。一个坏角色能对应用程序做什么真是太神奇了：）

<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>