border-spacing issue

**nomis66** · Sep 9, 2011 14:06

Hi Guys,

I'm experimenting with the border-spacing property, but I notice that even though I'm using a CSS reset, that the vertical spacing between the <th> and the first row of <td> is about double what it is just between the rows of <td>

any ideas how i can solve this?

Si

P.S. I've noticed that I have the same problem even when applying a cellspacing value to the html.

**AntunTun** · Sep 9, 2011 15:02

Why you want <th> to have same spacing like <td>? If you want equal spacing just use <td>.

**Stevie D** · Sep 9, 2011 15:29

Originally Posted by nomis66

I'm experimenting with the border-spacing property, but I notice that even though I'm using a CSS reset, that the vertical spacing between the <th> and the first row of <td> is about double what it is just between the rows of <td>

It's difficult to say, just from looking at a screenshot of the result ... can you give us your HTML and CSS code?

Originally Posted by AntunTun

Why you want <th> to have same spacing like <td>? If you want equal spacing just use <td>.

Bad idea. It's a table header cell, so it should be marked as <th>. We can play around with the CSS to get the right display, but you should always start with the right HTML.

**nomis66** · Sep 9, 2011 16:52

@Stevie, here is the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>

<table>
<thead> 
	<tr> 
		<th>Brand</th> 
		<th>Price</th> 
		<th>Power Source</th>         
	</tr> 
</thead> 

<tbody>
	<tr>
		<td>Vertical Align</td>
		<td>$247.00</td>
		<td>Mechanical</td>
	</tr>

	<tr>
		<td>Vertical Align Baseline</td>
		<td>$370.00</td>
		<td>Mechanical</td>
	</tr>

	<tr>
		<td>Vertical Align Middle</td>
		<td>$247.00</td>
		<td>Mechanical</td>
	</tr>

	<tr>
		<td>Vertical Align Middle</td>
		<td>$370.00</td>
		<td>Mechanical</td>
	</tr>
</tbody>
</table>

</body>
</html>

Code:

@charset "UTF-8";
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, 
code, address, variable, form, fieldset, blockquote {
   padding: 0;
   margin: 0;
   font-size: 100%;
   font-weight: normal;
}

table {border-spacing: 0; }

td, th, caption { font-weight: normal; text-align: left;}

img, fieldset { border: 0; }

ol { padding-left: 1.4em; list-style: decimal; }

ul { padding-left: 1.4em; list-style:square; }

q:before, q:after { content:''; }
/*reset end*/

table{
	margin: 40px;
	border-spacing: 20px;
}

th {
	font-weight: bold;
}

td, th {
	border: 2px solid blue;
	padding: 10px;	
}

**Stevie D** · Sep 10, 2011 01:23

Hmmm, that appears to be a bug in Chrome/Safari only, where they are keeping separate cell spacing within the <thead> and <tbody> rather than it folding into one – it's behaving as it should do in IE8, Opera and Firefox.

All I can suggest is to take out the <thead> and <tbody>, and just leave the top row using <th scope="col"> to highlight them being header cells.

**AntunTun** · Sep 10, 2011 02:09

Originally Posted by Stevie D

Bad idea. It's a table header cell, so it should be marked as <th>. We can play around with the CSS to get the right display, but you should always start with the right HTML.

After I looked a little bit into this I must admit that you are right.

**Stomme poes** · Sep 10, 2011 05:08

Why can't the OP try specifically targetting <thead> and <tbody>? I'd play around even more with the border-spacing and margins and padding, because this might just be browser defaults at work rather than a bug?

Also, I notice the large reset, but it's not hitting th's and td's. It might not matter at this size, but I remove padding (or set padding in my th/td styles) since for example Firefox adds 1px padding to those while nobody else seems to. Wrecked my calendars once until I realised what FF was up to.

**nomis66** · Sep 10, 2011 09:02

Hi again,

I've made the following changes to the reset but unfortunately it seems to have no effect. I've also changed the styes targeting <th> , <td> , <thead> , <tbody> , but it still renders exactly the same way.

It seems that any property that might potentially effect the cell spacing can only be applied to the <table> tag.

I'm pretty new to HTML/CSS, and I find this pretty suprising - surely removing the removing <thead> and <tbody> and relying purely on <th scope="col"> is semantically incorrect?

Code:

@charset "UTF-8";
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, 
code, address, variable, form, fieldset, blockquote, th, td, thead, tbody {
   padding: 0;
   margin: 0;
   font-size: 100%;
   font-weight: normal;
}

table, th, td, thead, tbody {border-spacing: 0; }

td, th, caption { font-weight: normal; text-align: left;}

img, fieldset { border: 0; }

ol { padding-left: 1.4em; list-style: decimal; }

ul { padding-left: 1.4em; list-style:square; }

q:before, q:after { content:''; }
/*reset end*/

table{
	margin: 40px;
	border-spacing: 20px;
}

th {
	font-weight: bold;
}

td, th {
	border: 2px solid blue;
	padding: 10px;
	margin: 50px;
	border-spacing: 50px;
	
		
}

thead, tbody {
	border-spacing: 50px;
	padding: 50px;
	margin: 50px;
}

**Stomme poes** · Sep 10, 2011 12:29

and relying purely on <th scope="col"> is semantically incorrect?

It'll be as accessible as a table with separate thead and tbody sections, but yeah if I have enough headers that I think there should be a thead, I wouldn't want to dump it just because of a layout bug.

Does a negative bottom margin applied to thead show anything? (even tho the spacing isn't a margin)?

**nomis66** · Sep 10, 2011 13:43

Unfortunately margins (negative or otherwise) don't have any affect.

Below, I have removed most of the CSS and added the cellspacing attribute to the html, but still to no avail.

I really can't believe that I'm the first person to ever notice this problem, it seems so fundamental.

Code:

table{
	margin: 40px;
}

th {
	font-weight: bold;
}

td, th {
	border: 2px solid blue;
	padding: 10px;		
}

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="styles2.css" rel="stylesheet" type="text/css" />
</head>
<body>

<table cellspacing="10">
<thead> 
	<tr> 
		<th>Brand</th> 
		<th>Price</th> 
		<th>Power Source</th>         
	</tr> 
</thead> 

<tbody>
	<tr>
		<td>Vertical Align</td>
		<td>$247.00</td>
		<td>Mechanical</td>
	</tr>

	<tr>
		<td>Vertical Align Baseline</td>
		<td>$370.00</td>
		<td>Mechanical</td>
	</tr>

	<tr>
		<td>Vertical Align Middle</td>
		<td>$247.00</td>
		<td>Mechanical</td>
	</tr>

	<tr>
		<td>Vertical Align Middle</td>
		<td>$370.00</td>
		<td>Mechanical</td>
	</tr>
</tbody>
</table>

</body>
</html>

**dresden_phoenix** · Sep 10, 2011 14:50

This is a known bug of webkit. No fix for it

. margin and positions should have ANY effect on table child elements to begin with.

I hate to suggest this, avoiding thead/tbody
<tr class="thead">/ <td scope='col'> seems to be the only workaround.

**deathshadow60** · Sep 11, 2011 01:02

Originally Posted by AntunTun

Why you want <th> to have same spacing like <td>? If you want equal spacing just use <td>.

Because semantically they're a HEADING?!? Wow, that's some real 1990's thinking there... Again as I've said a dozen times, if you are choosing tags based on what they look like, you're choosing the wrong tags!

Can't say I've ever seen said behavior from a table -- is this issue specific to one browser or something?

Lemme see here... first change that into how I'd code it; which means proper doctype instead of being in transition from 1997 to 1998, losing the charset declaration in the CSS since it's invalid for CSS to contain anything other than ASCII7, get a media type on it, make the formatting make SENSE, oh wait... yeah. DUH.

Border-spacing -- can't be trusted cross browser... you pretty much have to use cell-spacing.

Of course you're also using the giant fat/bloated reset that targets a bunch of things you either shouldn't be using, or that can CAUSE problems instead of fixing them.

... and that includes THEAD and TBODY, which are to themselves NON-RENDERING elements. Resetting them triggers that they should be shown! That's probably your issue.

Oh, I'd also probably set scope="col" on the "THEAD TH", then change the first column of TD in TBODY into TH, setting them to scope="row" since they appear to be headers/topic of the information that follows them.

I'd have coded that thus:

Markup:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>Table Test</title>

</head><body>

<table cellspacing="10" class="testTable">
	<thead> 
		<tr> 
			<th scope="col">Brand</th> 
			<th scope="col">Price</th> 
			<th scope="col">Power Source</th>         
		</tr> 
	</thead> 

	<tbody>
		<tr>
			<th scope="row">Vertical Align</th>
			<td>$247.00</td>
			<td>Mechanical</td>
		</tr>

		<tr>
			<th scope="row">Vertical Align Baseline</th>
			<td>$370.00</td>
			<td>Mechanical</td>
		</tr>

		<tr>
			<th scope="row">Vertical Align Middle</th>
			<td>$247.00</td>
			<td>Mechanical</td>
		</tr>

		<tr>
			<th scope="row">Vertical Align Middle</th>
			<td>$370.00</td>
			<td>Mechanical</td>
		</tr>
	</tbody>
</table>

</body></html>

then the CSS

Code:

html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

body {
	font:normal 85%/150% arial,helvetica,sans-serif;
}

table{
	font-size:100%;
}

.testTable {
	margin: 40px;
}

td,th {
	border:2px solid blue;
	padding:10px;		
}

tbody th {
	font-weight:normal;
	text-align:left;
}

tbody td {
	text-align:center;
}

Though it's odd, I'm unable to recreate your problem in ANY browser here using your code... Again, what browser is showing you that oddball formatting as I'm not seeing it here in Opera, FF, Safari, Chrome or any version of IE... though IE7 and lower ignores border-spacing, and FF applies an extra 15% to it on large fonts/120dpi setting (which is odd since it ignores that for %/em -- so it's applying something to it in PT?!?)

**Stevie D** · Sep 11, 2011 11:41

Originally Posted by nomis66

I'm pretty new to HTML/CSS, and I find this pretty suprising - surely removing the removing <thead> and <tbody> and relying purely on <th scope="col"> is semantically incorrect?

It isn't ideal to miss out the <thead>, but if you're using <th scope="col"> then at least the browser knows that that cell is a header for the column below it, which is almost as good.

It would be better to keep the <thead> there, but if a bug in Gecko browsers means that it causes an unacceptable and unsolvable display problem then sometimes you might have to make compromises, and as compromises go, this one is pretty minor.

Code:

table, th, td, thead, tbody {border-spacing: 0; }

table{
	margin: 40px;
	border-spacing: 20px;
}

This might sound like a silly question, but why are you bothering to zero out the border-spacing on all tables, only to add it back in on all tables?

**Stomme poes** · Sep 11, 2011 12:38

... and that includes THEAD and TBODY, which are to themselves NON-RENDERING elements. Resetting them triggers that they should be shown! That's probably your issue.

Originally Posted by nomiss66

I've also changed the styes targeting <th> , <td> , <thead> , <tbody> , but it still renders exactly the same way.

The OP did not have that stuff in the reset at the beginning of the thread. I mentioned adding more table elements to it to make sure there wasn't another browser default somewhere. Don't blame the OP, blame me, it was a test.

Again, what browser is showing you that oddball formatting as I'm not seeing it here in Opera, FF, Safari, Chrome or any version of IE..

Webkit, apparently.

I really can't believe that I'm the first person to ever notice this problem, it seems so fundamental.

Yeah. I wonder if people didn't see this because back when people tended to use this kind of syles for tables, they were using all HTML attributes? Or maybe webkit didn't have this issue long ago and since it popped up nobody's seen it?

**nomis66** · Sep 12, 2011 07:00

@deathshadow60

I cut and pasted the html/css from your post, but it still renders in exactly the same manner. I first noticed the problem using Live View, but it also occurs in Safari and Chrome (All Webkit). It does however pisplay as expected in Firefox and Opera.

As you may have guessed (by my lack of comments regarding IE) I am completely Mac based, so I guess that this Webkit issue could relate only to OSX. Maybe Windows users could clarify this point.

@dresden_phoenix

I suspect that you are right about this being a Webkit bug. As this bug seems to inherent to engine (Webkit) rather than the specific browsers built around that engine, is there a central Webkit development body to which this could be reported?

---------------------------------------------------------------------------------------------

To be honest, I'm a little confused about the function of the scope attribute, could anyone (in simple English) clarify this or point me to a website the does?

Many Thanks,
simon

**Stomme poes** · Sep 12, 2011 07:13

To be honest, I'm a little confused about the function of the scope attribute, could anyone (in simple English) clarify this or point me to a website the does?

If you have a row of td's and you would like to semantically note that the first td of the row is what the rest of the things in the row are talking about, you can do <td scope="row">first item on the left</td><td>is blue</td><td>haz cheezburgers</td><td>etc</td>
One would think the simple fact that you are using table rows and columns would impart this relationship, but it doesn't. Using th's where appropriate are the best thing, really. Everything else seems to have been developed by the spec writers simply to let authors ensure when a screen reader user hears the extra verbosity of repeating the header(s) associated with any particular cell they are on.

The Scope Algorithm as a shortcut of the Headers Algorithm. Headers (the attribute) is something I only use for when my table is slightly irregular (shopping cart tables I get this) and I want that, when the user gets to a particular table cell, the header associated with it is read out as well as the table data cell content.
If you need to see what I mean, I can post some of my shopping cart code.
(that article itself was a great help when I was first trying to make accessible tables. It's pretty out of date now, esp where it talks about axis (you can use axis to your heart's delight, though most of the time you don't need to... but it works in screen readers just fine), but it helps explain the specs in m0aR-bettr-engrish since the specs, indeed, are not really written in English. The article also links to the specs, which is also handy... fewer links I need to post : )

Usually using a th where headers (actual headings) should be is enough for screen readers, but each reader is a little different in how it deals with tables and what exactly it will read out when the user navigates around it.

But often I have td's on the far left of my table who, while kinda "heading" the rest of the row (because usually it's the name of the Thing involved, like the article the user is purchasing) isn't really a standalone header (it's data cell content because it's part of the data), so I keep it a td and give it a scope of row.
To me, a th is properly something that isn't the data being hauled out of the database, but tells us instead what the data coming out of the database IS. For a column of dates, the header is "Date" and doesn't belong in a td because it's not table data itself, but a header that's added to the table data.

I add scope="col" to my th's I think now out of habit. They do no harm that I know of and may help any lagging AT in treating the top headers correctly.

is there a central Webkit development body to which this could be reported?

There's a webkit bugzilla.
They will want a reduced case (the simplest table you've built that shows the bug), and when you report, you state what you expected (no gap), what you saw (a gap under thead), and likely which webkit you're using (which version, which browser, and which platform... you can ask if those on other platforms or with other webkit browsers can confirm).

**Stevie D** · Sep 12, 2011 10:52

Originally Posted by nomis66

To be honest, I'm a little confused about the function of the scope attribute, could anyone (in simple English) clarify this or point me to a website the does?

It tells the browser whether the <th> you're applying it to is the header for a row or column. You'd think it should be fairly obvious that if you've got a row of <th>s across the top and <td>s everywhere else that those header cells apply to the columns below them, but it's good practice to spell it out by using the scope attribute.

User Tag List

Thread: border-spacing issue

Thread Tools

Display

border-spacing issue

Bookmarks

Bookmarks

Posting Permissions