Changing individual cell border colors

[drennan]

Hi. I was given some code which allows me to calculate cell data within a table. The code contains CSS, which I have never used before. The CSS code seems to be preventing me from changing the border color of individual cells from the property inspector within dreamweaver. I tried changing the color from the CSS palette in dreamweaver but it applied it to lots of cells, not the ones I had selected. How can I change specific cell border colors using CSS? I'm fairly new to this so i may be doing something stoopid. thanks, Dren.

[WebJoel]

Without seeing your actual code, use 'inline-style' on the targeted TD:

<td style="border:1px solid red;"> will give a 1px all-around red border.

The 'precedence' of this will over-ride any embedded stylesheet (the "<style></style>" before "</head>" is called "embedded"), and 'embedded' over-rides any 'external' CSS document.

In short, the 'closer' the rules are placed to the element being affected, is the one used. Last-stated is obeyed, even if it overrules a previous.

If you have multiple cells that need this, I'd use "embedded" CSS:

<style>
.colorChange {1px solid red;}
</style>

and :

<td class="colorChange"> ~ etc...

<td class="colorChange"> ~ etc...

<td class="colorChange"> ~ etc... and so-forth..

<td class="colorChange"> ~ etc...

[drennan]

Thanks, that worked. I also need to divide areas of the table using black lines. Do you know how i would create a line between a row/column of cells? appreciate your help.

[ray326]

Do a border-collapse:collapse on the table then style everything as needed.

[drennan]

I need to section off areas of a table with black lines. Similar to outlining multiple cells in excel

The table is here: http://www.fluxcreative.co.uk/form_test.html

I'm new to CSS and apparently need it for the functionality of this table.

If I section off areas of this table by adding black rows/columns, the totals stop updating and I don't know why.

Is there a way of sectioning off the green and yellow section with black lines by using CSS?

Thanks, Dren :)

[Fang]

Give an example of the table with borders around cells.

[drennan]

like this http://www.fluxcreative.co.uk/form.jpg

[Fang]

The simple solution would have been to add tbody around those groups, unfortunately IE doesn't support it.
Either: split the groups into separate tables, which would also require rewriting the JavaScript.
Or: add classes to tr's and td's to achieve the desired result. This would leave a working JavaScript.

Note: finish designing your document before adding any JavaScripting!

[WebJoel]

That data table would be sweet with this iefixes.htc:

http://www.vladdy.net/demos/iepseudoclassesfix.html

[drennan]

ok, i've finally worked out how to do it and the line is showing up on IE.

I've put this at the top of my code:

tbody td, tfoot input {
text-align:center;
font-style: normal;
}

tr.rowborder td { border-top:thin solid #000;}

And this at the beginning of the row that needs a line:

<tr class="rowborder">

As soon as I do this though, the line appears but the calculations on my table stop working. If I can just get this fixed I can go ahead and finish the site. Can anyone see why this change has stopped the figures adding up?

http://www.fluxcreative.co.uk/form_test.html

Thanks, Dren.

[WebJoel]

Valid code is always best for getting rid of problems: you have a "tr" in "body" and another before the "</head>", -enough 'warning' to actually be a page-busting "error". :o

image: