FireFox CSS Table Extra Border Line -
i encountered table border line css problem in firefox, when css border-collapse collapse, , have 2 merged cells, 1 of them has 1px border. unwanted border line exists on right. problem not exist in other browsers, ie , chrome don't have 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 tested doctype is:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
.
<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>
i don't know if there better fix it, problem lies colspan
, use of border-collapse
.
i re-wrote code because looked messy me, solution use border-spacing: 0;
instead of border-collapse: collapse;
this isn't perfect because aren't same thing. if of cells had borders on them ones inside table double creating 2px border.
however in situation wouldn't notice , use border-collapse
anyway.
well, think have said enough.
here code (a little different yours same thing):
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>
Comments
Post a Comment