Table format using CSS 1

[tinapa]

Hi folks,

I have a 4X4 table. I want to show only the grid inside this table and not show the four outer borders. How can I achieve this using CSS that is both recognized by IE and Firefox?

Thanks for any inputs.

 

[feherke]

Hi

This is standard compliant. Should work in Explorer too, but test it yourself.

.tl {
  border-right-style: solid;
  border-bottom-style: solid;
}
.tr {
  border-left-style: solid;
  border-bottom-style: solid;
}
.bl {
  border-right-style: solid;
  border-top-style: solid;
}
.br {
  border-left-style: solid;
  border-top-style: solid;
}

<table>
<tr><td class="tl">a</td><td class="tr">b</td></tr>
<tr><td class="bl">c</td><td class="br">d</td></tr>
</table>

If you collapse the borders, then is enough to style only two cells.

table {
  border-collapse: collapse;
}
.tl {
  border-right-style: solid;
  border-bottom-style: solid;
}
.br {
  border-left-style: solid;
  border-top-style: solid;
}

<table>
<tr><td class="tl">a</td><td>b</td></tr>
<tr><td>c</td><td class="br">d</td></tr>
</table>

Feherke.

http://rootshell.be/~feherke/

 

[tinapa]

WOW, that works like a charm!!!

Thanks very much feherke!

Have a nice weekend!

 

[Vragabond]

If I understand correctly, a slightly simpler version would be:

table {
  border-collapse: collapse;
}

td {
  border: 1px solid;
}

<table>
  <tr>
    <td>a</td><td>b</td>
  </tr>
  <tr>
    <td>c</td><td>d</td>
  </tr>
</table>

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[feherke]

Hi

Quite nice approach, Vragabond. Just you have to hide the outer borders, as tinapa not wants them.

table {
  border-collapse: collapse;
  [red]border-style: hidden;[/red]
}

td {
  border: 1px solid;
}

This works in Mozilla ( FireFox, Seamonkey ), Opera and Konqueror, Safari and Chrome. The question is, if it works in Explorer 7++. Because in Explorer 6 not.

The rule of thumb is that at each edge the most "eye catching" border style is chosen, except that any occurrence of the style 'hidden' unconditionally turns the border off.

Border conflict resolution

Feherke.

http://rootshell.be/~feherke/