Firefox 表格中边框折叠的不同厚度答案

【问题标题】：Different thicknesses for the border-collapse in a table on firefoxFirefox 表格中边框折叠的不同厚度
【发布时间】：2014-05-15 21:28:45
【问题描述】：

在 Firefox 中，我有一个表格，当应用边框折叠时，边框的粗细不同。但是这个问题在 Chrome 中不会出现。

表格的HTML和CSS代码：

//HTML
<div id="divTabela">
    <table width="100%" cellpadding="4" border="1" name="tabelainfo" id="tabelainfo" class="bordasimples">
        <tbody>
            <tr id="titulotabela">
                <th colspan="1" rowspan="1">Data Inicial</th>
                <th colspan="1" rowspan="1">Data Final</th>
                <th colspan="1" rowspan="1">Distribuidor</th>
                <th colspan="1" rowspan="1">Agendar</th>
                <th colspan="1" rowspan="1">Ver Detalhes</th>
            </tr>
            <tr id="corpotabela">
                <td align="center" colspan="1" rowspan="1">####</td>
                <td align="center" colspan="1" rowspan="1">####</td>
                <td align="center" colspan="1" rowspan="1">####</td>
                <td align="center" colspan="1" rowspan="1"></td>
                <td align="center" colspan="1" rowspan="1"><div title="Ver Detalhes"><a href="#"><div></div></a></div></td>
            </tr>
            <tr id="corpotabela"><td align="center" colspan="1" rowspan="1">####</td>
                <td align="center" colspan="1" rowspan="1">####/td>
                <td align="center" colspan="1" rowspan="1">####</td>
                <td align="center" colspan="1" rowspan="1"></td>
                <td align="center" colspan="1" rowspan="1"><div title="Ver Detalhes"><a href="#"><div></div></a></div></td>
            </tr>
        </tbody>
    </table>
    <br>
</div>



//CSS
table.bordasimples {border-collapse: collapse;}
table.bordasimples tr td {border:1px solid;}
table.bordasimples tr th {border:1px solid;}

#tabelainfo {
    padding-top: 0px;
    font-size: 12px;
    font-family: Calibri;
    text-align: justify;
    border-top-color: #FFFFFF;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    border-left-color: #FFFFFF;
    color: #083c06;
    text-decoration: none;
}

请参见下图中的表格行：

【问题讨论】：

请显示更多代码。
表格的完整 HTML 怎么样？
看起来像是渲染问题。当您滚动时，边框是否会自行“修复”并移动到另一行？
@drip，不。当页面滚动时，问题仍然存在。
好的，我已经用更多代码更新了主题。

标签： html css firefox border

【解决方案1】：

我解决了只是更改 CSS 代码的问题：

table.bordasimples {
    border-spacing: 0px;
    border:1px solid #D2DDD4;
}
table.bordasimples tr td, table.bordasimples tr th
{border:1px solid #D2DDD4;}

我将border-collapse 替换为border-spacing 并更改了边框的颜色，现在我的表格是我想要的方式，并且布局更好。

谢谢大家！

【讨论】：

我为我的表格使用了border-collapse，它成功地解决了这个问题。但是，border-spacing:0px 没有奏效。我尝试了 Chrome 并在 iOS 的 UIWebView 中运行它。感谢您的启发！