Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

border-spacing vs cellspacing

Status
Not open for further replies.
1DMF

1DMF

Programmer
Jan 18, 2005
8,795
GB
is there a way to get IE & FF to collapse just the border-spacing in the thead but apply it to the tbody.

I've tried various combinations all i seem to do is either have cellspacing / border spacing , or not.

can you mix the two?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Sort by date Sort by votes
AFAIK, border-spacing, cellspacing and border-collapse are per table settings so you won't be able to have them applied differently to individual sections of the table. What exactly are you trying to accomplish?
 
Upvote 0 Downvote
Not AFAIK... border-collapse is a property of the table itself, IIRC. You could try using two tables, and aligning the column widths, but this often proves nigh-on impossible without the use of JS.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
What exactly are you trying to accomplish?
Click to expand...

I have a fixed heading in the thead, with a scrollable tbody.

Great, I want the tr/td to have cell spacing, only doing this means as the data scrolls under the thead, it pops out slightly above (the gap of the cellspacing), I don't want this visible.

How would i do whis if I wanted cellspacing on the td/tr but hide the scrolling content from showing above the thead.

would applying a margin to a td work?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
I would suggest trying bottom margin, padding and/or a border of the same colour as the background on the th, tr or thead elements. You'll probably have to try a few options before you find one that works cross-browser.

Let us know how you get on.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
I've been playing and can't work it out.

what is the space between borders (cellspacing) , it seems to be some no-mans land I cannot control.

I even tried putting illegal (no-semantic) div's around the thead and tbody setting adding z-index with no effect.

Infact it won't even display div's that are wrongly placed in a table, as I applied border to see then and nothing appeared.

I've tried z-index on the tbody & thead direct and that didn't work either.

I've applied bg colour to the table, tr and td of the thead
but still the cellspacing around the tr of the thead for the heading seems to be some kind of transparent twilight zone I can't do anything with.

anyone got any ideas?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
but i've tried leaving the cellspacing alone and applied margin to them and the td doesn't increase in sice whan margin is applied.

am I doing something wrong, from what I can tell in IE cellspacing overides anything else, and even if i don't apply cel spacing it seems to have a default that margin doesn't affect.

I'm lost

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Don't be lost ... yet!

Post some code we can play with ;-)
 
Upvote 0 Downvote
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html>
<head>
  <title>Table cellspacing</title>
  <style type="text/css">
	table {
		padding: 0;
		border: none;
		background: pink;
		border: 1px black solid;
	}

	th {
		background: pink;
		color: black;
	}

	td {
		color: white;
		background: blue;
		border: 1px black solid;
	}	
  </style>
</head>
<body>
  <table cellspacing="2">
    <tr>
      <th>Table header 1</th>
      <th>Table header 2</th>
      <th>Table header 3</th>
      <th>Table header 4</th>
    </tr>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
      <td>Row 1, Cell 4</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
      <td>Row 2, Cell 3</td>
      <td>Row 2, Cell 4</td>
    </tr>
  </table>
</body>
</html>
I hope that this will demonstrate the the cellspacing is actually showing the background of the table, like I thought before you said it doesn't. I have cellspacing on this table, but the background on table and th matches and it is virtually invisible in the header while present in the normal cells. Or am I getting your request wrong?
 
Upvote 0 Downvote
Vragabond -> I think you're missing the point of what the problem is, it's not that I can't get the bg the color i want. it's to do with the cellspacing showing the content of the table rows when they scroll.

look here
the test charts on the left, scroll the data and watch the content pop-up above the table headings, I cannot seem to stop this from happening if I use cellspacing on the table.

NB. This is a very much a WIP site so ignore the errors and stuff on the right for the profile, i'm developing this bit as we speak!


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
are you using IE7 , the double scrollbar should be there though, what browser are you using?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
that'll be why you can't see the problem I've got, well at least you reminded me to remove my test CSS.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Camila James
  • Locked
  • Question
Shopify vs. WooCommerce – Which Platform To Use For Your Online Store?
Replies
3
Views
164
lucasbrown
lucasbrown
lupidol
  • Locked
  • Question
Table's title row's rounded corners border 1
Replies
2
Views
175
lupidol
lupidol
lupidol
  • Locked
  • Question
An element (div) enclosed by &quot;border&quot; 1
Replies
3
Views
145
vacunita
vacunita
1DMF
  • Locked
  • Question
box-shadow on tables with border-collapse in IE11 don't work?
Replies
0
Views
145
1DMF
1DMF
k4ghg
  • Locked
  • Question
&lt;ul&gt; and &lt;li&gt; Spacing 3
Replies
9
Views
169
k4ghg
k4ghg

Part and Inventory Search

Sponsor

Back
Top