Table being rendered by Firefox with different border thicknesses

Navigation
0

I'm having a problem specifically for tables rendered in firefox. I need to use the border-collapse property in my tables to join the borders of the cells. But when firefox renders the table, the edges are different thicknesses as shown below.

NOTE: This problem does not occur in Chrome.

Image of the rendered table. Note that the highlighted red lines are thicker:

HTMLandCSStablecode:

//HTML<divid="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;
}
    
asked by anonymous 04.04.2014 / 16:13

2 answers

1

I was able to solve by treating only the CSS code as follows: 

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

In other words, I replaced border-collapse with border-spacing and the problem was resolved. The new border got a bit darker, so to address this problem, I replaced the border colors.

Thank you very much for the suggestions of all of you, it was they that made me think differently and solve this problem.

    
05.04.2014 / 22:47
0

What version of your firefox? with version 28.0 ran the code you posted perfect, did not give to simulate.

But what I think might be the problem would be your style. For you do the drawing of the border at the top and then underneath, so it always has 2 lines, in some cases this can present with little difference.

Try to leave your style like this: 

#tabelainfo {
    padding-top: 0px;
    font-size: 12px;
    font-family: Calibri;
    text-align: justify;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    border-left-color: #FFFFFF;
    color: #083c06;
    text-decoration: none;
}
    
04.04.2014 / 16:23
Why is the Entity Framework generating a new record in the database? [duplicate] How to enable tab content within v-show component inactive by activating it [closed]