Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

How to Overwrite TD Element Properties?

Posted on 2006-06-26
8
477 Views
Last Modified: 2008-02-01
Hello,
I have a CSS file that sets TD peoperty for the whole page like this:

td{
font: 10pt Verdana;
}

I want to apply a different font and font size to only one particular table on this page without changing CSS TD set above. How can I do it if I know table's ID?

Something like this, perhaps, using JavaScript:
var mytable=document.getElementById("mytable");
mytable.style.fontFamily= "Arial";
mytable.style.fontSize= "8pt";

But this does not overwrite TD CSS set above. I need a way to apply above JavaScript to the TD element of the table. Please help!
0
Comment
Question by:Vadymus
  • 3
  • 3
  • 2
8 Comments
 
LVL 6

Expert Comment

by:inviser
ID: 16986010
why don't you you create a new css class, say:

td.new_class {
font: 10pt Verdana;
}

and then assign the particular td that class name like this:

<td class=new_class>...</td>

Otherwise if you still want to go the js route, make sure the js code comes after the css in the page, then it should work.
0
 

Author Comment

by:Vadymus
ID: 16986135
Great! But how can I assign these TDs to have "new_class" if I know TD's table ID? See, I do not want to do <td class=new_class>...</td> because in some cases this table is using default TD CSS.

So, can it be something like:
#tableId.td.new_class {
font: 10pt Verdana;
}

Thank you
0
 
LVL 6

Expert Comment

by:inviser
ID: 16986158
Sure thing, you would do it like this:

<td id=tdID>...</td>

<style>
#tdID {
font: 10pt Verdana;
}
</style>
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16986315
here is the syntaxt if your table's id is "mytable":

table#mytable td {
  font-family: Arial;
  font-size: 8pt;
}
0
 

Author Comment

by:Vadymus
ID: 16986596
Your suggestions make my question answered almost completely.
Please, tell me the very last thing is it is possible:

If I have this (if syntax is correct):

table#mytable td.new_class {
  font-family: Arial;
  font-size: 8pt;
}

how can I tell JavaScript to apply it when I need (something like):

var mytable=document.getElementById("mytable");
mytable.className = "table#mytable td.new_class";
0
 
LVL 6

Expert Comment

by:inviser
ID: 16986657
I'm not sure I understand exactly what you are trying to do by the code you just posted. Could you elaborate a bit more?
0
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 25 total points
ID: 16986770
Sorry, i did not read the question with enough care.

You should set the class on the table:

var mytable=document.getElementById("mytable");
mytable.className = "someclass";

then use this CSS:

table.someclass td {
  font-family: Arial;
  font-size: 8pt;
}
0
 

Author Comment

by:Vadymus
ID: 16986814
GrandSchtroumpf offered this:

table#mytable td {
  font-family: Arial;
  font-size: 8pt;
}

By default, I have this:

td{
font: 10pt Verdana;
}

I want to use default all the time unless I specify GrandSchtroumpf's version. How do I specify it? That;s my question. I thought if I add a class to GrandSchtroumpf's version, then I can call it with JavaScript like this:

var mytable=document.getElementById("mytable");
mytable.className = "table#mytable td.new_class";

But will it work?
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question