CODEWITHSUNDEEP
htmlcsshtml-table
Jericho
Jericho

Reputation: 10953

CSS for Table Properties in HTML

In a single page am having multiple tables but only for a set of tables want to apply css not for all. which for table bgcolor, th color, border color and text color.So I tried to create a separate class .mytable and applied which is not working but if I make that .mytable to table it comes for all the tables.Please help me to solve this.Thanks in Advance.

jsFiddle Link is Here

<style>
.mytable td th   //instead of .mytable table it works
{
    border:1px solid green;
}
th{
    background-color:green;
    color:white;
}
</style>



<table class="mytable">
<tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
</tr>
<tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
</tr>

</table>
<table> /// no need of this css
</table>

Upvotes: 1

Views: 345

Answers (9)

Vicky
Vicky

Reputation: 829

Access like this:

.mytable td, .mytable th (It changes the property for all td and th nested inside the .mytable)

OR

If you have seperate class inside the mytable means

HTML

<div class="mytable">
    <div class="data">
        <ol>
           ...
        </ol>
    </div>
</div>

CSS

.mytable.data ol //Accessing the child ol

Upvotes: 0

user2999210
user2999210

Reputation: 1

Please add these lines on top of your Css file 

tr{ background:#00CC66;}
th{ background:#ccCC66; border:1px dashed #0066FF;}
td{ background:#ffCC66;}
color:#fff;

Upvotes: 0

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

As i seen your code you using th as a child tag of td but th not child tag of td so use below code

Click here for fiddle

.mytable th
    {
       border:1px solid green;
    }

Upvotes: 0

Ishan Jain
Ishan Jain

Reputation: 8171

It's because, you write wrong CSS Rule :

Your css rule : .mytable td th refers to inner th tag into table columns .mytable td.

So, If you want apply your css style for both th and td. You need to write this one:

.mytable td, .mytable th 
{
   border:1px solid green;
}

Try in fiddle

Upvotes: 0

Karthick Kumar
Karthick Kumar

Reputation: 2361

        <style>
        .mytable td th   
        {
                  border:1px solid green;
        }
        .mytable  th
        {
                  background-color:green;
                  color:white;
        }
        </style>



        <table class="mytable">
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Savings</th>
        </tr>
        <tr>
          <td>Peter</td>
          <td>Griffin</td>
          <td>$100</td>
        </tr>
        </table>

        <table>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Savings</th>
        </tr>
        <tr>
          <td>Peter</td>
          <td>Griffin</td>
          <td>$100</td>
        </tr>
        </table>

Upvotes: 0

marsze
marsze

Reputation: 17084

th selects every <th>-element.

.mytable td th selects all <th>-elements inside <td>-elements inside an element, that has class mytable.

I think what you need is this:

/* td & th elements inside 'mytable' */
.mytable td, .mytable th
{
  border:1px solid green;
}
/* th elements inside 'mytable' */
.mytable th
{
  background-color:green;
  color:white;
}

Upvotes: 0

sjpatel
sjpatel

Reputation: 184

I cant see any problem in above code, but you can try identifier instead of class by denoting it as '#mytable'.

Just give it a try.

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20418

Try this

.mytable td, .mytable th
{
          border:1px solid green;
}

DEMO

Upvotes: 2

Jon P
Jon P

Reputation: 821

Rewrite this .mytable td th as .mytable td, .mytable th

Here: http://jsfiddle.net/y8B2j/1/

Upvotes: 4

Related Questions