CODEWITHSUNDEEP
jqueryhtmlcss
Sush
Sush

Reputation: 1457

applying different style in table headers

i have a table like 

<table class="historystyle" >
  <tr>
    <th > name</th>
    <th >location</th>
    <th > job</th>
    <tr>
</table>

in name header i dont want to apply the background-image style so i put th inside a div element and set style="background-image: none;

But it is not working .name header still shows the backgorund image.whats wrong with my code..please help

<table class="historystyle" >
  <tr>
   <th><div style="background-image: none; ">name</div></th>
    <th>location</th>
    <th> job</th>
    <tr>
</table>

style

.historystyle th{
  border: 1px solid black;
  background-image: url(../images/bg.gif);
  cursor: pointer;
}

Upvotes: 0

Views: 48

Answers (2)

Micha&#235;l van de Weerd
Micha&#235;l van de Weerd

Reputation: 788

First of all, your second tr tag should be /tr. Now try the following CSS code:

/* your style code */
.historystyle th {
    border: 1px solid black;
    background-image: url(../images/bg.gif);
    cursor: pointer;
}

/* add this */
.historystyle th:first-of-type {
    background-image: none;
}

This makes the first occuring th element within .historystyle appear without a background image. I made a quick test to verify that this works over here, using background colors instead of images.

Upvotes: 1

elixenide
elixenide

Reputation: 44823

You need to apply your style="background-image: none" to the th itself:

<table class="historystyle" >
  <tr>
   <th style="background-image: none">name</th>
    <th>location</th>
    <th> job</th>
    <tr>
</table>

Applying it to the div has no impact on how the th is displayed. By default, (most) HTML elements are transparent, so the div would have no background, but you could see right through to the th, which did still have a background.

Upvotes: 2

Related Questions