March 13th, 2004, 08:52 AM
-
CSS and bordering only certain table cells
Hi, I have the following code which is for a table.
Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td><a name="A"></a>A</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a name="B"></a>B</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a name="C"></a>C</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a name="D"></a>D</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a name="E"></a>E</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a name="F"></a>F</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a name="G"></a>G</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a name="H"></a>H</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a name="I"></a>I</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a name="J"></a>J</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a name="K"></a>K</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a name="L"></a>L</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a name="M"></a>M</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a name="N"></a>N</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a name="O"></a>O</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a name="P"></a>P</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a name="Q"></a>Q</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
What I want to do is to have a black 1px border around the cells with the letters in, in A, B, C , D etc etc.
I am hoping it is a CSS thing, but I only want it to apply to this table, not all the other tables on the page.
Anyone know the easiest way to do this?
Thanks
March 13th, 2004, 09:13 AM
-
Hi,
Just setup a style:
Code:
<style type="text/css">
.bbox { border: 1px solid black; };
</style>
and apply it to the cells you want:
Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td> </td></tr>
<tr><td class="bbox"><a name="A"></a>A</td></tr>
<tr><td> </td></tr>
<tr><td class="bbox"><a name="B"></a>B</td></tr>
etc...
Simon
March 13th, 2004, 10:06 AM
-
Ok. I've got that working now. However, I'm trying to do something else. I want to use CSS for all my existing tables as I just tried my site in Mozilla and the borders don't come out how they should, so I used some CSS and it works properly. This is what I have at the moment.
TABLE.border {
border-style: solid;
border-width: 2px;
border-color: 000000;
padding: 0px;
}
And I use it like <table class="border" etc etc. This puts a 2px border around the table, but how do I get the cells inside to have borders as well. A 1px line between each row is what I'm after, so that the border is thinner than the outer border of the table.
Thanks
March 13th, 2004, 10:19 AM
-
You don't need to declare the style as "TABLE.name", just use ".name", and use <table class="name">. That way the style can be applied to other elements as well.
For the cell borders, declare a style and do <td class="name">
You can use { border-bottom: 1px solid gray } to put a line between each row.
You can apply any style to any html element, so you can put borders around most things this way, div's, forms, tables, cells, <a>'s, anything.
Simon
March 13th, 2004, 02:09 PM
-
just use the cascading in css
table.border td {
border:1px solid #000;
}
affects every td with in the table with class border.
you can also add,
border-collapse:collapse;
to the table.border element.
March 13th, 2004, 02:20 PM
-
The cascade is fine if you wan't to affect every cell in a table, otherwise you have to use individual class attributes.
Simon
March 13th, 2004, 03:11 PM
-
Originally Posted by Akh
you can also add,
border-collapse:collapse;
to the table.border element.
Thanks.
What does the border-collapse:collapse do?
March 13th, 2004, 03:12 PM
-
March 13th, 2004, 03:16 PM
-