Tables and CSS - Removing spaces

[Tim_Cooper]

Hi all,First post, so sorry if I've missed anything vital from my description, let me know if you need more info.This is the 2nd time I've come across this problem and despite several google and forum searches I haven't found the answer (or realised I'd found it, at least).Problem: I create a table to display data on a webpage, three columns, many rows. I also use css to set the top table corners to rounded, add some padding to the table top so the rows start under the curved edges and changed the background so the top "bar" has a different colour. I then set the td and th background colours to the actual background colour I want. Despite setting the borders to 0px/style:none, and the padding and margins to 0px I still seem to have a 1-2 pixel gap between all cells. This is visible because the table background that fills the top area is also showing through between the cells.I tried setting the tables border-collapse: collapse; property but that removes the nice curved corners, kind of defeating the point.I'm developing the page initially for firefox (e.g. my browser) but will test and debug on other browsers once the initial layout is complete.I'm afraid the page isn't live yet as I still have a lot of work to do on it. The following html is sitting inside the middle column of a 3 column layout made using <div>'s.

<table class="myTable">  <tr>    <td class="titleRow" colspan="3">Data Group</td>  </tr>  <tr>    <th>Heading1</th>    <th>Heading2</th>    <th>Heading3</th>  </tr>  <tr>    <td>Data1</td>    <td>Data2</td>    <td>Data3</td>  </tr>  <tr>    <td>Data4</td>    <td>Data5</td>    <td>Data6</td>  </tr></table>

and the css:

table {   border-width: 1px;   border-style: solid;   width: 100%;   padding: 0px;   margin: 0px;   padding-top: 20px;   background-color: #ee0000;   border: 2px solid #a13600;   border-top-left-radius: 20px;   border-top-right-radius: 20px;   -moz-border-radius-topleft: 20px;   -moz-border-radius-topright: 20px;}th {   text-align: left;   padding: 0px;   margin: 0px;   border: 0px none #121212;   background-color: #ededed;   color: #121212;}td {   padding: 0px;   margin: 0px;   border: 0px none #121212;   background-color: #ededed;   color: #121212;}.titleRow {   font-weight: bold;   background-color: #a13600;   color: #ededed;   border: 0px none #121212;}

Any thoughts or suggestions are gratefully received.Tim

[dsonesuk]

you could use border-spacing:0;, only problem is that it does not work for IE versions below IE8, as it is not recognised. if you want it to work in all versions of IE and other browsers, use cellspacing="0" in table tag.

[mnkn]

I think border-collapse:collapse;might be the style you are looking for.

[thescientist]

I think border-collapse:collapse;might be the style you are looking for.

I tried setting the tables border-collapse: collapse; property but that removes the nice curved corners, kind of defeating the point.

are you using CSS3 properties for the rounded corners? Perhaps images may help you in this situation.

[dsonesuk]

To fix the problem with border-collapse, why not just add the rounded corner effect to an outer container element, such as a div.

[Tim_Cooper]

Thanks for all the replies.I've just tried added the border-spacing: 0px; property (and cellspacing: 0px; too, just to be complete) and that's worked. I've not heard of that property before (and it wasn't in the CSS tutorials here I was using as a guide). When you say it's not supported, do you just mean by older browser versions or is it a firefox specific property?As for the other points, I thought I'd quickly reply:Cellpadding/cellspacing: Can these be put in the css or do they need to go in the html table tag? I tried using them to solve the problem in the css but they didn't seem to have any effect, so now I'm wondering if it's a css or firefox issue.Corner Images: I was trying to avoid using images to speed up design changes like changing the internal colour, outline colour and size without needing to make new images each time. From what I read it seemed to be possible so I wanted to figure out how to do it :)Outer container option: I thought of this just after I posted last night as the table background colour could then block the <div> background. It was a good fallback option.Thanks again to everyone for helping.

[ShadowMage]

I've just tried added the border-spacing: 0px; property (and cellspacing: 0px; too, just to be complete) and that's worked. I've not heard of that property before (and it wasn't in the CSS tutorials here I was using as a guide). When you say it's not supported, do you just mean by older browser versions or is it a firefox specific property?...Cellpadding/cellspacing: Can these be put in the css or do they need to go in the html table tag? I tried using them to solve the problem in the css but they didn't seem to have any effect, so now I'm wondering if it's a css or firefox issue.

cellpadding can be replaced by using the padding properties on td and th tags in CSS. cellspacing can be imitated (but not directly replaced) by using the margins. So to answer your question, the cellpadding and cellspacing properties themselves are HTML attributes of the table tag but can be imitated/replaced by CSS.As for the border-spacing, it isn't supported in any version of Internet Explorer less than 8 (maybe even including 8? not sure) but it should work in other browsers.

Corner Images: I was trying to avoid using images to speed up design changes like changing the internal colour, outline colour and size without needing to make new images each time. From what I read it seemed to be possible so I wanted to figure out how to do it :)Outer container option: I thought of this just after I posted last night as the table background colour could then block the <div> background. It was a good fallback option.

I too would recommend staying away from images. (unless you want to have older browsers have round corners, since they don't support CSS 3)However, I think I would actually recommend the container option. Personal opinion I guess. I don't like to use padding (among a few other properties) directly on the table element. Just seems wrong.

[dsonesuk]

looking into cellspacing css alternative for IE versions lower than IE8 there is border-spacing: expression(cellSpacing=0);which seems to work.the only main problem is now getting the round corners to work in IE, the htc fix only targets all edges using border-radius, and not topleft, topright specific edges. Not only that, the top padding for rounded corners does not seem to show for IE6 or IE7, so the best option maybe to use outer container, with border-radius to target all edges, and the use table to overlap bottom rounded corner edges or somehow use overflow:hidden to hide this edge.