Solved

Apply CSS table style to a specific table

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
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…

808 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