Table being rendered by Firefox with different border thicknesses

Asked

Viewed 562 times

0

I have a problem specifically for tables rendered in firefox. I need to use the border-Collapse property on my tables to join the edge 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.

Rendered table image. See that the highlighted red lines are thicker: enter image description here

HTML and CSS table code:

//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 css firefox html-table css-border
  • 1

    I couldn’t reproduce the problem. jsfiddle here appears perfect.

  • This looks more like a problem of zoom or smoothing applied on the graphics.

  • Zoom in and see if anything changes.

  • Hello @Miguelangelo, I tested your jsfiddle in firefox and the problem persisted. However in Chrome everything is ok.

  • @mayconfsbrite: must be specific to the version you are using then. If so, I wouldn’t worry, because in this case it would be a bug of a specific version.

  • 1

    I was able to solve by treating only the CSS code as follows: table.bordasimples { border-Spacing: 0px; border:1px Solid #D2DD4; } table.bordasimples tr td {border:1px Solid #D2DDD4;} table.simples tr th border {border:1px Solid #D2DDD4;} That is, I replaced border-Collapse with border-Spacing and the problem was solved. The new border became a little darker, so to treat this problem, I replaced the colors of the edges. Thank you very much for the suggestions of all of you, it was they that made me think differently and solve this problem.

  • @mayconfsbrite: Could you add your previous comment as a response? So if others have the same problem, it’s easy for them to find where the solution is. = D

Show 2 more comments

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;}

That is, I replaced the border-Collapse with the border-Spacing and the problem was solved. The new border became a little darker, so to treat this problem, I replaced the colors of the edges.

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

0

Which version of your firefox ? with version 28.0 worked the code you posted perfect, could not simulate.

But what I think might be the problem would be your style. Because you draw the edge at the top and then at the bottom, 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;
}

  • The version of my firefox is the 28, but I have tested in other previous versions and the problem persists.

  • Unfortunately with the code you posted there are no defects. But when I’m doing a report on C# I usually only edge the bottom line.. Because this also happens there.

Browser other questions tagged html css firefox html-table css-border

You are not signed in. Login or sign up in order to post.