FireFox CSS Table Extra Border Line

I ran into a CSS problem on the border line of a table in Firefox when CSS crashes collapse and has 2 merged cells, one of which has a 1px border. There is an additional undesirable border on the right. This problem does not exist in other browsers, IE and Chrome do not have a problem.

Firefox Version

Mozilla / 5.0 (Windows; U; Windows NT 5.1; ZH-CN; rv: 1.9.2.8) Gecko / 20100722 Firefox / 3.6.8 (.NET CLR 3.5.30729)

My test type:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

.


alt text

 <table cellspacing="0" cellpadding="0" style="position: absolute; width: 217px; left: 0px;border-collapse:collapse"> <colgroup><col col="0" style="width: 72px;"><col col="1" style="width: 72px;"><col col="2" style="width: 72px;"> </colgroup> <tbody> <tr tridx="0" style="height: 19px;"> <td rowspan="2" colspan="2" style="border: 1px solid #000000"></td><td row="0" col="2"></td> </tr> <tr tridx="1" style="height: 19px;"><td row="1" col="2"></td></tr> <tr tridx="2" style="height: 19px;"><td row="2" col="0"></td><td row="2" col="1"></td><td row="2" col="2"></td></tr> <tr tridx="3" style="height: 19px;"><td rowspan="3" colspan="2" style="border: 1px solid #000000"></td><td></td></tr> <tr tridx="4" style="height: 19px;"><td ></td></tr> <tr tridx="5" style="height: 19px;"><td></td></tr> </tbody> </table> 
+4
source share
1 answer

I don't know if there is a better fix for it, but the problem lies in colspan and using border-collapse .

I rewrote the code only because it seemed dirty to me, but basically the solution was to use border-spacing: 0; instead of border-collapse: collapse;

This is not ideal because it is not the same thing. Therefore, if all your cells have borders with them, then those inside the table will double the creation of a 2px border.

However, in this situation you will not notice anything, and you could use border-collapse anyway.

Ok, I think I have said enough.

Here is my code (slightly different from yours, but it does the same):

CSS

 <style type="text/css"> .tableStyle { position: absolute; left: 0px; border-spacing: 0; } .tableStyle td { height: 19px; width: 72px; } .blackBorder { border: 1px solid #000; } </style> 

HTML:

 <table class="tableStyle"> <tr> <td rowspan="2" colspan="2" class="blackBorder">1</td> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td rowspan="3" colspan="2" class="blackBorder">7</td> <td>8</td> </tr> <tr> <td>9</td> </tr> <tr> <td>10</td> </tr> </table> 
+3
source

All Articles