ansaurus

Question

FireFox CSS Table Extra Border Line Problem

Answer 1

A:

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

I re-wrote the code just because it looked messy to me, but basically the solution was to use border-spacing: 0; instead of border-collapse: collapse;

This isn't perfect because they aren't the same thing. So if all of your cells had borders on them then the ones inside the table would double up creating a 2px border.

However in that situation you wouldn't notice anything and you could use border-collapse anyway.

Well, I think I have said enough.

Here is my code (A little different from yours but it does the 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>

Sour Lemon 2010-10-08 09:24:22

Thank you for your clear explanations and good advice. In fact, not all of my cells had borders on them, but some of them, it depends.If I use "border-collapse: collapse", table would double up creating 2px borders, else other cells without borders would had extra unwanted borders.

Fisher 2010-10-11 01:39:19

ansaurus

tags:

views:

answers:

FireFox CSS Table Extra Border Line Problem

related questions