Solved

How to Overwrite TD Element Properties?

Posted on 2006-06-26
8
479 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
[X]
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
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

717 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