Question

我创建了一个HTML表，并使用以下CSS按照我的方式设置边框样式：

顶行和列是一种颜色，表格的其余部分是条纹替代行颜色。
每个单元格上的常规单个黑色边框

这是我的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表格的屏幕截图。当我单击一个单元格时，边框出现。为什么呢？

alt text http://img40.imageshack.us/img40/5126/htmltable.png

Answer 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吗？

常规的HTML表格边框在Firefox中显得很奇怪

1 个答案: