?
Solved

Apply CSS table style to a specific table

Posted on 2007-04-09
3
Medium Priority
?
1,453 Views
Last Modified: 2013-11-19
I have the following table css file

table {
      width: 100%;
      color: #212424;
      margin: 0 0 1em 0;      
      font: 80%/150% "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Lucida, Helvetica, sans-serif;
}
table, tr, th, td {
      margin: 0;
      padding: 0;
      border-spacing: 0;
      border-collapse: collapse;
}
caption {
      width: 100%;
      height: 39px;
      font-size: 0;
      line-height: 0;
      text-indent: -5000em;
      background: url(caption.gif) no-repeat 98% 0;
}
caption:hover {
      background-position: 98% 100%;
}

/* HEADER */

thead {
      background: #524123;
}
thead tr th {
      padding: 1em 0;
      text-align: center;
      color: #FAF7D4;
      border-bottom: 3px solid #A5D768;
}

/* FOOTER */

tfoot {
      color: #fff;
      background: #524123;
}
tfoot tr th, tfoot tr td {
      padding: .2em .6em;
      border-top: 2px solid #A5D768;
}
tfoot tr th {
}
tfoot tr td {
      text-align: right;
}

/* BODY */

tbody tr td {
      background: #DDF0BD url(bg_cell.gif) no-repeat top left;
}
tbody tr.odd td {
      background-color: #D0EBA6;
}
tbody tr td:hover, tbody tr.odd td:hover {
      background: #c5e894;
}
tbody tr th, tbody tr td {
      padding: 0.1em 0.4em;
      border: 1px solid #a6ce39;
}
tbody tr th {
      padding-right: 1em;
      text-align: right;
      font-weight: normal;
      background: #c5e894 url(bg_cell.gif) no-repeat top left;
      text-transform: uppercase;
}
tbody tr th:hover {
      background: #D0EBA6;
}
table a[href*="taimar.pri.ee"] {
      float: left;
      width: 64px;
      height: 64px;
      font-size: 0;
      text-decoration: none;
      background: transparent url(http://taimar.pri.ee/examples/table-design/taimar.gif) no-repeat 0 0;
}
table a[title^="Download"] {
      float: none;
      width: auto;
      height: auto;
      font-size: 100%;
      background: none;
}

/* LINKS */

table a {
      color: #854400;
      text-decoration: none;
}
table a:visited {
      text-decoration: line-through;
}
table a:hover {
      text-decoration: underline;
}

My HTML has 3 tables in it and I would like to apply the above style only to one table.  How could I use this above CSS specific to only one table.
0
Comment
Question by:thirunachi
[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 Comments
 
LVL 28

Expert Comment

by:TName
ID: 18874876
In your html part, give the table an id:
<table id="table1">

And in the css section, change "table" to "#table1"  (or table#table1)

#table1 { ...}

#table1 a {...}
0
 
LVL 28

Expert Comment

by:TName
ID: 18874886
You could then also change rulesets like this

tbody tr th, tbody tr td {
      padding: 0.1em 0.4em;
      border: 1px solid #a6ce39;
}

to only apply to the one table:

#table1 tbody tr th, #table1 tbody tr td {
      padding: 0.1em 0.4em;
      border: 1px solid #a6ce39;
}
0
 
LVL 28

Accepted Solution

by:
TName earned 1500 total points
ID: 18874920
Try this CSS - presuming the table you want to style has the id "table1"
<table id="table1">


<style>

#table1 {
      width: 100%;
      color: #212424;
      margin: 0 0 1em 0;      
      font: 80%/150% "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Lucida, Helvetica, sans-serif;
}
#table1, #table1 tr, #table1 th, #table1 td {
      margin: 0;
      padding: 0;
      border-spacing: 0;
      border-collapse: collapse;
}
#table1 caption {
      width: 100%;
      height: 39px;
      font-size: 0;
      line-height: 0;
      text-indent: -5000em;
      background: url(caption.gif) no-repeat 98% 0;
}
#table1 caption:hover {
      background-position: 98% 100%;
}

/* HEADER */

#table1 thead {
      background: #524123;
}
#table1 thead tr th {
      padding: 1em 0;
      text-align: center;
      color: #FAF7D4;
      border-bottom: 3px solid #A5D768;
}

/* FOOTER */

#table1 tfoot {
      color: #fff;
      background: #524123;
}
#table1 tfoot tr th, #table1 tfoot tr td {
      padding: .2em .6em;
      border-top: 2px solid #A5D768;
}
#table1 tfoot tr th {
}
#table1 tfoot tr td {
      text-align: right;
}

/* BODY */

#table1 tbody tr td {
      background: #DDF0BD url(bg_cell.gif) no-repeat top left;
}
#table1 tbody tr.odd td {
      background-color: #D0EBA6;
}
#table1 tbody tr td:hover, tbody tr.odd td:hover {
      background: #c5e894;
}
#table1 tbody tr th, tbody tr td {
      padding: 0.1em 0.4em;
      border: 1px solid #a6ce39;
}
#table1 tbody tr th {
      padding-right: 1em;
      text-align: right;
      font-weight: normal;
      background: #c5e894 url(bg_cell.gif) no-repeat top left;
      text-transform: uppercase;
}
#table1 tbody tr th:hover {
      background: #D0EBA6;
}
#table1 a[href*="taimar.pri.ee"] {
      float: left;
      width: 64px;
      height: 64px;
      font-size: 0;
      text-decoration: none;
      background: transparent url(http://taimar.pri.ee/examples/table-design/taimar.gif) no-repeat 0 0;
}
#table1  a[title^="Download"] {
      float: none;
      width: auto;
      height: auto;
      font-size: 100%;
      background: none;
}

/* LINKS */

#table1  a {
      color: #854400;
      text-decoration: none;
}
#table1  a:visited {
      text-decoration: line-through;
}
#table1  a:hover {
      text-decoration: underline;
}
</style>

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

762 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