Solved

Apply CSS table style to a specific table

Posted on 2007-04-09
3
1,387 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 500 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

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

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

Suggested Solutions

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
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…

777 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