How to specify CSS for table?

Hello!

I have trouble to define CSS for table. I see different results between following two variants:

1) Bad table - see link below
"http://hladky.awardspace.com/B/a.html"
This one is using
<link rel="stylesheet" type="text/css" href="a.css">


2) Good table -see link below
"http://hladky.awardspace.com/B/b.html"
This is the desired table layout. I have directly included "a.css" into HTML source code.

Please see either attached pictures or URL above to see the difference.

I will appreciate any idea what's wrong.

Thanks a lot!
Jiri

 

you need to remove the cellspacing

the CSS attribute is border-collapse: collapse I believe

 

Hi,

I have tried to add
border-collapse: collapse;

but it's still the same. Could you give me an example what do you mean?

I still don't understand why the way how I include CSS (either as reference or directly into HTML) influence the results....

Thanks a lot!
Jiri

 

this is very strange, from what I can see in your css the table should be without any cellspacing

 

In the HTML use:

<table cellspacing="0">

A lot of browsers have trouble with that CSS property.

 

well that's definitely one way of doing it

 

The proper style property is "border-spacing". This is just one more example of IE's lack of support. IE7 does not fix the issue. Thanks MSFT. All modern browsers support the css property. In IE, you must use the html attribute, "cellspacing".

cheers,

gary

 

Thank you all for the solution!

<table class="sample" cellspacing="0">

Code (markup):

is working Without

cellspacing="0"

Code (markup):

it's not working in
Firefox 1.5
Konqueror 3.5
SeaMonkey 1.0.4

In fact, I havn't found any browser where
"http://hladky.awardspace.com/B/a.html"
is displayed correctly. Does anybody know about such browser?

Furthermore, do you think it's a bug? Is it worth to report it to Firefox team?

Thanks a lot!
Jiri

 

Hi,

one more point. The correct version displays border:

border-style: dashed dashed dashed dashed;

It's dashed line around the table:
http://hladky.awardspace.com/B/b.html

What is the trick to display it also in
http://hladky.awardspace.com/B/a.html

Cheers
Jiri

 

You may not have any html markup in the stylesheet. eg.

 
<style type="text/css">   <-- remove from the external file
table.sample {
	border-width: 1px 1px 1px 1px;
	border-spacing: 0px;...

Code (markup):

And, don't overdo the style rules.

html, body {
    margin: 0;
    padding: 0;
    }
    
body {
    font: 100% verdana, sans-serif;
    }
    
table{
    margin: 30px;
    border: 1px dashed gray;
    }
    
th {
    background-color: red;
    }
    
.d0 td {
    background-color: #c99;
    }
    
.d1 td {
    background-color: #99c;
    }

Code (markup):

cheers,

gary

 

Hi Gary!

Thanks a lot for the solution! I have removed

<style type="text/css">

Code (markup):

from a.css and now it's working as expected!

I knew that I have mistake somewhere

Thanks again!
Jiri