Click to See Complete Forum and Search --> : Styling accessible table rows (<TR>)


invisible kid
09-23-2005, 04:41 AM
I'm creating an 'accessible' table, but whenever I try and style the rows (e.g. add an inline style to the <tr> tags, or add a tr class in the stylesheet), it doesn't seem to work.

I'm trying to add a continuous border to the bottom of each row, but it just won't appear.

I can get round this problem by adding borders to the top of the <td> tags, but there are breaks in the border where the new columns start.

The structure is as follows:

<table>
<thead>
<tr>
<th id="topicsHeader">Topics...</th>
<th id="authorHeader">Author</th>
<th id="repliesHeader">Replies</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="topicsHeader">Idium sit amet quanto</td>
<td headers="authorHeader">ruthie</td>
<td headers="repliesHeader">1</td>
</tr>
</tbody>
</table>

Please can anyone explain why I can't style the <tr> tags, and offer a solution so that I can create continuous horizontal borders under the rows?

David Harrison
09-23-2005, 04:48 AM
Styling table rows is perfectly possible, not sure what you currently have in the way of CSS but here's how I'd do it:table{
border-collapse:collapse;
}

tr{
border:1px solid #000;
border-width:1px 0;
}Edit: Here's (http://www.hddkillers.com/100805/list.php) an example of something similar in action except that I styled the <td>'s.

David Harrison
09-23-2005, 04:55 AM
OK, after a quick play around with the styles on that page, yeah I see your point, how odd. in that case just stick to styling the <td>'s:table{
border-collapse:collapse;
}

td{
border:1px solid #000;
border-width:1px 0;
}

invisible kid
09-23-2005, 05:21 AM
Border-collapse works a treat, thanks!

It seems <tr> doesn't have a border property in CSS.

David Harrison
09-23-2005, 05:22 AM
Happy to help. :)

invisible kid
09-23-2005, 07:39 AM
border-collapse doesn't seem to work in Mac IE 5 - does anyone know of a fix for this?

Thanks,
IK

David Harrison
09-23-2005, 07:44 AM
I'm afraid I can't test on a Mac, however I know something that'd probably work.

Try this:<table cellspacing="0">It's a deprecated attribute but it'll do what you want without impacting on accessibility.

Why would anyone in their right mind who uses a Mac want to use IE anyway?