PDA

View Full Version : Borders for all rows and columns


Andromeda
05-14-2006, 09:00 AM
I'm trying to create a table where rather than just the outside border showing, all the columns and row borders show as well. My css is as follows:

table.test {font-family: Tahoma, Verdana, Arial; font-size: 10pt; background-color: #ffffff; border: 1px solid #0066aa; border-collapse: collapse; padding: 15px;}

td.test {font-family: Tahoma, Verdana, Arial; font-size: 10pt; background-color: #ffffff; border: 1px solid #ffffff; border-collapse: collapse; padding: 15px;}

th.test {font-family: Tahoma, Verdana, Arial; font-size: 10pt; background-color: #ffffff; border: 1px solid #0066aa; border-collapse: collapse; padding: 15px;}


Can anyone tell me what I'm doing wrong? I know I've linked the style sheet correctly because the outside border works and when I change the font size that works too.

I'm not very up with CSS so if anyone sees anything else which needs improvement I'm certainly open to suggestions.

The actual page can be viewed at http://www.aoteacollege.school.nz/testing.html
but for some reason viewing it in FF gets you a balnk page while IE shows the one border.

d a v e
05-14-2006, 10:08 AM
try this for your css:

.test {font-family: Tahoma, Verdana, Arial; font-size: 10pt; background-color: #ffffff;
border: 1px solid #0066aa; padding: 15px; border-collapse: collapse;}

Andromeda
05-14-2006, 07:57 PM
:lol: It works perfectly!! Obviously I was trying to make it more complicated that I needed to!!!


Thanks HEAPS

d a v e
05-14-2006, 08:20 PM
welcome :)

Andromeda
05-14-2006, 08:28 PM
And how would I go about making just the outside border slightly thicker than the rest. I realize I should probably get rid of the collapse but how do I do that so that it doesn't affect all the lines inside?

d a v e
05-14-2006, 08:29 PM
make a different class with a wider border (say 2 or 3 px) then apply that to the table

Andromeda
05-15-2006, 02:20 AM
OK. That worked. Thanks for that. I now almost have the effect I'm after.
It can be viewed at http://www.aoteacollege.school.nz/testing.html

I have a couple of questions.

1. The red text should be at the bottom of each cell and not with space underneath as currently shown. What do I need to do to fix this?

2. When viewed in Firefox, the blue text has a lot more space around it than it does in IE. IE shows the effect I am trying to achieve. Is there a fix for this?


Here's the css code if it helps:

Body {font-family: Tahoma, Verdana, Arial; font-size: 10pt; color: #000000;}

H1 {font-family: Tahoma, Verdana, Arial; font-size: 14pt; color: #0066aa;}

H2 {font-family: Tahoma, Verdana, Arial; font-size: 10pt; color: #0066aa; font-weight: bold;}

H3 {font-family: Tahoma, Verdana, Arial; font-size: 10pt; color: #0066aa; font-weight: bold; text-align: center;}

H4 {font-family: Tahoma, Verdana, Arial; font-size: 10pt; color: #0066aa; font-weight: bold; text-align: right;}

H5 {font-family: Tahoma, Verdana, Arial; font-size: 10pt; color: #FF0000; font-weight: bold; text-align: left;}


.test { background-color: #ffffff;
border: 2px solid #0066aa;
border-collapse: collapse;
padding: 5px;
vertical-align: top;}

.test2 {background-color: #ffffff;
border: 1px solid #0066CC;
border-collapse: collapse;
padding: 5px;}

.test3 {background-color: #FFFFCC;
border: 1px solid #0066CC;
border-collapse: collapse;
padding: 5px;}

.test4 { background-color: #ffffff;
border-collapse: collapse;
padding: 5px;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-style: solid;
border-color: #0066CC; }

.test5 { background-color: #ffffff;
border-collapse: collapse;
padding: 5px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-style: solid;
border-color: #0066CC;}

.test6 { background-color: #FFFFCC;
border-collapse: collapse;
padding: 5px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-style: solid;
border-color: #0066CC;}

.test7 { background-color: #FFFFCC;
border-collapse: collapse;
padding: 15px;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-style: solid;
border-color: #0066CC;}


As always, thanks heaps for your expertise, time and help. :D

ranjan
05-15-2006, 03:13 AM
Take a look at this CSS


<style type="text/css">
table {
/*border-collapse:collapse;*/
border:4px solid #333;
}
td {
padding: 0px;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
width: 100px;
background: #AAA;
}
.last_right {
border-right: none;
}
.last_bottom {
border-bottom:none;
}
</style>

Now the HTML for the table

<table cellspacing="3">
<tbody>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td class="last_right">test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td class="last_right">test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td class="last_right">test</td>
</tr>
<tr>
<td class="last_bottom">test</td>
<td class="last_bottom">test</td>
<td class="last_bottom">test</td>
<td class="last_bottom last_right">test</td>
</tr>
</tbody>
</table>

Note: I put in the cellspacing and commented border collapse so u can see how we apply border to each cell ( the last column cells have no right border and the bottom row cells have no bottom border ). Once you understand uncomment the collapse and use 0 for cell spacing

Andromeda
05-15-2006, 07:50 AM
Hey Ranjan.

Thanks for that. It makes things so much tidier and less long-winded.

It doesn't solve my text problem (anybody???)

But it does make things much tidier.

Thanks again ranjan.

dthomsen8
05-15-2006, 06:16 PM
Andromeda,

You want quotes around your string for the font family, and you want sans-serif after the specified fonts. Otherwise, most users will get their browser's default font, Times New Roman.

David

Andromeda
05-15-2006, 09:04 PM
Like this??

Body {font-family: "Tahoma, Verdana, Arial" sans-serif; font-size: 10pt; color: #000000;}

domedia
05-15-2006, 10:14 PM
almost, only font faces with spaces need quotes, so it would be like this:
body {font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 10pt; color: #000000;}

Andromeda
05-21-2006, 10:37 PM
Thanks for that domedia.