Solved

Apply CSS table style to a specific table

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

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

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

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.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

707 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