Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Apply CSS table style to a specific table

Posted on 2007-04-09
3
Medium Priority
?
1,492 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
  • 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

Industry Leaders: 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!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

569 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