Firefox浏览器HTML表格行间出现异常灰色线条问题求助

这个问题的根源在于你使用的HTML表格属性rules=rows——这是一个比较老旧的HTML4属性，不同浏览器对它的渲染逻辑有差异：Chrome会忽略它或者让它和你设置的cellspacing=1黑色背景重叠，而Firefox会额外渲染出灰色的行分隔线，导致出现你看到的问题。

快速修复方案 #

直接移除rules=rows属性即可，修改后的代码如下：

<table width="90%" align=center cellspacing=1 cellpadding=5 style="border: solid 2px black;" bgcolor="#000">
  <tr style="background-color: brown;">
    <td width="100%">row1</td>
  </tr>
  <tr style="background-color: blue;">
    <td width="100%">row2</td>
  </tr>
</table>

移除这个属性后，Firefox就不会再渲染那些灰色线条，同时保留你原本想要的行之间1px黑色间隔效果。

更规范的现代写法（推荐） #

为了更好的跨浏览器兼容性和可维护性，建议用CSS替代老旧的HTML表格属性，比如：

<style>
  .styled-table {
    width: 90%;
    margin: 0 auto; /* 替代align=center */
    border: 2px solid black;
    border-collapse: separate;
    border-spacing: 1px; /* 替代cellspacing=1 */
    background-color: #000;
  }
  .styled-table td {
    padding: 5px; /* 替代cellpadding=5 */
    width: 100%;
  }
  .styled-table tr:first-child {
    background-color: brown;
  }
  .styled-table tr:last-child {
    background-color: blue;
  }
</style>

<table class="styled-table">
  <tr>
    <td>row1</td>
  </tr>
  <tr>
    <td>row2</td>
  </tr>
</table>

这种写法完全用CSS控制样式，避免了老旧HTML属性的兼容性问题，同时样式逻辑更清晰，后续修改也更方便。

内容的提问来源于stack exchange，提问作者user1022585