PDA

Click to See Complete Forum and Search --> : need help with table borders

jacen6678
08-27-2003, 10:07 AM
I want to build a page with 2 different styles of tables. One style should have no borders and the other should borders around every <td>. How can I get bordered <td>'s and unbordered <td>'s without specifying the class for every single <td> element?

What I have tried:
.no_borders{
border-collapse: collapse;
border-style: none;
margin: 0;
padding: 0;
}

.borders{
border-collapse: collapse;
border-color: black;
border-style: solid;
border-width: 1;
margin: 0;
padding: 0;
}

If I apply class="borders" to the table elements, I only get borders around the table. I want to avoid applying class="borders" to every single <td> element that should have borders. B\c I also need no-border tables, I cannot do
td{
border-collapse: collapse;
border-color: black;
border-style: solid;
border-width: 1;
margin: 0;
padding: 0;
}
I tried td{
border-collapse: inherit;
border-color: inherit;
etc... } in combination with classing the table elements and had no luck with that either.
pyro
08-27-2003, 10:18 AM
Look into CSS selectors (http://www.w3.org/TR/1998/REC-CSS2-19980512/selector.html)...
toicontien
08-27-2003, 10:23 AM
Basically the answer to your question is...

Nope.

It all has to do with the CSS box model.

The <table> tag creates a box that contains all the rows and cells. Then each cell creates a box that contains the actual data for the table. And since you want to place the borders around the boxes that contain the data, you have to apply the CSS classes to the <td> tags.

I agree that it is annoying. After all, <table border="1"> puts a border around all the cells, why not have <table style="border: 1px solid black;"> do the same thing? But that's just the way CSS works. :rolleyes:

EDIT: after pyro posted above while I was still writing

Yes CSS selectors will work, but most likely not on Internet Explorer. Mozilla, Opera, and Netscape 7.x should support enough of the CSS selectors to get what you want, but I wrote "basically... nope" above because, in practice, the majority of the browsers that people use (MSIE) probably won't display the borders at all. But then again, that probably won't break your layout, so you might not really care.
pyro
08-27-2003, 10:48 AM
Try this out:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Borders via CSS selectors</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/*Note the CSS selector. We are telling it to look for all <td>s in the class "borders"*/
.borders td {
border-collapse: collapse;
border-color: black;
border-style: solid;
border-width: 1;
margin: 0;
padding: 0;
}
.no_borders{
border-collapse: collapse;
border-style: none;
margin: 0;
padding: 0;
}

</style>
</head>
<body>
<table class="borders">
<tr>
<td>Table One, Cell One</td>
<td>Table One, Cell Two</td>
</tr>
<tr>
<td>Table One, Cell Three</td>
<td>Table One, Cell Four</td>
</tr>
</table>
<table class="no_border">
<tr>
<td>Table Two, Cell One</td>
<td>Table Two, Cell Two</td>
</tr>
<tr>
<td>Table Two, Cell Three</td>
<td>Table Two, Cell Four</td>
</tr>
</table>
</body>
</html>