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"> 

.


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> 

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

Popular posts from this blog

ASP.NET/SQL find the element ID and update database -

jquery - appear modal windows bottom -

c++ - Compiling static TagLib 1.6.3 libraries for Windows -