How to apply this css for a particular table

I have the css that applies for the table as below.


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xx  CSS Table Gallery               xx
xx  Author: Stu Nicholls            xx
xx  URL: http://www.cssplay.co.uk/  xx
xx  Country: England                xx
xx  Date: 2005-10-23                xx
xx  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
table {
  border-collapse:collapse;
  font-family:verdana, arial, sans-serif;
  font-size:0.75em;
  line-height:2em;
  border:1px solid #363;
  }
td, th {
  padding:0 0.5em;
  border-top:1px solid #ddd;
  }
tr.odd {
  background:#eee;
  }
th {
  background:#839965;
  }
caption, tfoot {
  font-family:georgia, "times new roman", serif;
  font-size:3em;
  line-height:2em;
  height:2em;
  padding-right:0.25em;
  text-align:right;
  color:#363;
  border:1px solid #ddd;
  }
tfoot th {
  background:#fff;
  color:#363;
  font-weight:normal;
  }
thead tr {
  color:#fff;
  height:4em;
  }
thead tr th:first-child {
  color:#fc6;
  border-right:1px solid #000;
  text-align:right;
  padding-right:1.5em;
  }
tbody th {
  padding:0;
  border-right:1px solid #fff;
  border-top:1px solid #000;
  width:16em;
  vertical-align:middle;
  }
tbody tr.odd th {
  border-right:1px solid #eee;
  }
tbody td {
  color:#363;
  vertical-align:middle;
  height:4em;
  }
tbody th a {
  color:#fc3;
  text-decoration:none;
  border-right:0.8em solid #fc3;
  font-weight:normal;
  text-align:right;
  padding-right:0.5em;
  float:right;
  border-top:0.8em solid #839965;
  border-bottom:0.8em solid #839965;
  }
tbody tr th a:visited {
  border-right:0.8em solid #fff;
  }
tbody tr.odd th a:visited {
  border-right:0.8em solid #eee;
  }
tbody td a:visited {
  color:#000;
  font-weight:normal;
  text-decoration:line-through;
  }
tbody td a {
  color:#000;
  font-weight:normal;
  }
tbody tr th a:hover {
  color:#fff;
  border-right:0.8em solid #fff;
  }
tbody tr.odd th a:hover {
  color:#fff;
  border-right:0.8em solid #eee;
  }
tbody td a:hover {
  color:#c00;
  font-weight:normal;
  text-decoration:none;
  }

But I already have a table structure say for instance “outtable”, inside which I need to apply the above css to the table present inside the “outtable” say for instance “insidetable”.

But when I apply the above css to the html page the outtable also gets effected in addition to the inside table which I dont want to. I am sure it is easy. But got struck up in the mid as I have not played well with css and tables.

Hello

That CSS is generic for all tables. You need to give the insidetable a unique ID in teh HTML

<table id="insidetable" ...>

Then copy and paste that css you’ve got into the same .css file and add that ID to each selector that differs from the other tables.

table#insidetable {
  border-collapse:collapse; 
  font-family:verdana, arial, sans-serif; 
  font-size:0.75em; 
  line-height:2em; 
  border:1px solid #363;
}

Hope it makes sense, if not post again. :slight_smile:

Crossed half the river…in the below css newtbl is the table id…have i used it correctly in other attributes like td. tr etc., as you applied in for the table attribute.


/*

	TableCloth	
	by Alen Grakalic, brought to you by cssglobe.com
	
*/

/* general styles */

table#newtbl, td#newtbl{
	font:100% Arial, Helvetica, sans-serif;
}
table#newtbl{width:100%;border-collapse:collapse;margin:1em 0;}
th#newtbl, td#newtbl{text-align:left;padding:.5em;border:1px solid #fff;}
th#newtbl{background:#328aa4 url(tr_back.gif) repeat-x;color:#fff;}
td#newtbl{background:#e5f1f4;}

/* tablecloth styles */

tr.even td#newtbl{background:#e5f1f4;}
tr.odd td#newtbl{background:#f8fbfc;}

th.over, tr.even th.over, tr.odd th.over{background:#4a98af;}
th.down, tr.even th.down, tr.odd th.down{background:#bce774;}
th.selected, tr.even th.selected, tr.odd th.selected{}

td.over, tr.even td.over, tr.odd td.over{background:#ecfbd4;}
td.down, tr.even td.down, tr.odd td.down{background:#bce774;color:#fff;}
td.selected, tr.even td.selected, tr.odd td.selected{background:#bce774;color:#555;}

/* use this if you want to apply different styleing to empty table cells*/
td.empty, tr.odd td.empty, tr.even td.empty{background:#fff;}