-1

我创建了一个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 中看起来不错。有什么想法我在这里做错了吗？

我在 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 回答