/    Sign up×
Community /Pin to ProfileBookmark

Changing individual cell border colors

Copy linkTweet thisAlerts:
Jul 08.2008

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.

to post a comment
CSS

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelJul 08.2008 — Without seeing your actual code, use 'inline-style' on the targeted TD:

<td [B]style="border:1px solid red;"[/B]> 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>[/QUOTE]

and :

<td [B]class="colorChange"[/B]> ~ etc...

<td [B]class="colorChange"[/B]> ~ etc...

<td [B]class="colorChange"[/B]> ~ etc... and so-forth..

<td [B]class="colorChange"[/B]> ~ etc...
Copy linkTweet thisAlerts:
@drennanauthorJul 08.2008 — 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.
Copy linkTweet thisAlerts:
@ray326Jul 08.2008 — Do a border-collapse:collapse on the table then style everything as needed.
Copy linkTweet thisAlerts:
@drennanauthorJul 08.2008 — 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 ?
Copy linkTweet thisAlerts:
@FangJul 08.2008 — Give an example of the table with borders around cells.
Copy linkTweet thisAlerts:
@FangJul 08.2008 — 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 [B]before[/B] adding any JavaScripting!
Copy linkTweet thisAlerts:
@WebJoelJul 08.2008 — That data table would be sweet with this iefixes.htc:

http://www.vladdy.net/demos/iepseudoclassesfix.html
Copy linkTweet thisAlerts:
@drennanauthorJul 08.2008 — 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.
Copy linkTweet thisAlerts:
@WebJoelJul 09.2008 — 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:

[upl-file uuid=86bb6add-9687-47c8-b870-0b0778aa31e5 size=29kB]ScreenHunter_5.gif[/upl-file]
×

Success!

Help @drennan spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...