Forum Moderators: not2easy
I want to have a solid 1px bottom border for each row. But I am not
smart enough with CSS to figure out how to do this without giving a
class to each TD (there are 244 of them) And I want there to be about
8px of margin underneath that border, or before the next person's name.
How could I do this? I just want a bottom border. I've tried giving the
<tr> a class that has a border-bottom assigned to it, but haven't been
able to make it work.
Thanks!
Christopher
[edited by: engine at 8:22 am (utc) on May 30, 2009]
[edit reason] See TOS [/edit]
<!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" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.names {
border-collapse: collapse;
}
.names td, .names th {
padding: 8px 3px 0;
border-bottom: 1px solid black;
}
.names th {
font-weight: bold;
border-bottom: 2px solid black;
text-align: left;
text-transform: capitalize;
}
</style>
</head>
<body>
<table class="names">
<thead>
<tr>
<th>name</th>
<th>email</th>
<th>phone</th>
<th>affiliation</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>John.Doe@example.com</td>
<td>+1 (234) 567-7890</td>
<td>All</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>Jane.Doe@example.com</td>
<td>+1 (234) 567-7890</td>
<td>None</td>
</tr>
</tbody>
</table>
</body>
</html>
Is this more or less what you were looking for ?
@tangor, hope you see from that code that CSS and tables can work very well together? ;) - the HTML table rules are being deprecated, and are not actually supported very consistently across browser so it's not so easy to get this same look without CSS
the only CSS property lagging was an equivalent of the HTML attribute for cellspacing, but I believe IE8 is taking care of that one too (border-spacing it should be)
see CSS2 Table Display Model [w3.org] for the CSS WITH Table Display Model[/url] for more info
