CODEWITHSUNDEEP
htmlcss
Akajit Saelim
Akajit Saelim

Reputation: 91

How to set background color of td in CSS

I am coding css for tabs which there are two rows (there are many tabs) in table. I want to set background color to them,

This is HTML:

<table>

    <!--profile-->
    <tr><td colspan="3">profile</td></tr>

    <!--tabs 2 rows-->
    <div class="tab_links">
    <!--row 1-->
    <tr>
        <td class="active"><a href="#tab1">tab1</a></td>
        <td><a href="#tab2">tab2</a></td>
        <td><a href="#tab3">tab3</a></td>
    </tr>
    <!--row 2-->
    <tr>
        <td><a href="#tab4">tab4</a></td>
        <td><a href="#tab5">tab5</a></td>
        <td><a href="#tab6">tab6</a></td>
    </tr>
    </div>

    <!--detail of tab-->
    <tr><td colspan="3">detail of tab</td></tr>

</table>

I try to code CSS, but it isn't work.

This is CSS:

.tab_links td {
    background:#7fb5da;
}

Thank you

Upvotes: 0

Views: 29716

Answers (4)

David Thomas
David Thomas

Reputation: 253506

There is one reason that your styling isn't applied, that's because the selector you supply .tab_links td is never matched by the document. This is because, when constructing the DOM (the Document Object Model) the browser does not maintain invalid HTML, it tries to 'rescue' it. This is a feature, and not a bug. For example, the following (abbreviated and invalid) HTML:

<table>
    <div class="tab_links">
    <!--row 1-->
    <tr>
        <td class="active"><a href="#tab1">tab1</a></td>
        <td><a href="#tab2">tab2</a></td>
        <td><a href="#tab3">tab3</a></td>
    </tr>
    <!--row 2-->
    <tr>
        <td><a href="#tab4">tab4</a></td>
        <td><a href="#tab5">tab5</a></td>
        <td><a href="#tab6">tab6</a></td>
    </tr>
    </div>
</table>

Is, when constructing the DOM, converted (tested in Chrome 40.x/Windows 8.1) to:

<div class="tab_links">
    <!--row 1-->
</div>
<table>
    <tbody>
        <tr>
            <td class="active"><a href="#tab1">tab1</a>    
            </td>
            <td><a href="#tab2">tab2</a>    
            </td>
            <td><a href="#tab3">tab3</a>    
            </td>
        </tr>
        <!--row 2-->
        <tr>
            <td><a href="#tab4">tab4</a>    
            </td>
            <td><a href="#tab5">tab5</a>    
            </td>
            <td><a href="#tab6">tab6</a>    
            </td>
        </tr>
    </tbody>
</table>

Note that the <div> element now precedes the <table>? Also, the browser adds a (technically) optional <tbody> element to wrap the <tr> elements; but that's not terribly relevant.

So: the problem becomes the <div> being in the wrong place; the only valid elements to be nested directly within a <table> element are: <tbody>, <thead>, <tfoot> and <tr>1.

The solution I'd suggest, since you seem to want to group a number of <tr> elements together, is to wrap those elements with a <tbody>, and assign the relevant class-name to that element, which similarly, but more semantically, groups them together:

<table>
    <tbody class="tab_links">
        <tr>
            <td class="active"><a href="#tab1">tab1</a>    
            </td>
            <td><a href="#tab2">tab2</a>    
            </td>
            <td><a href="#tab3">tab3</a>    
            </td>
        </tr>
        <!--row 2-->
        <tr>
            <td><a href="#tab4">tab4</a>    
            </td>
            <td><a href="#tab5">tab5</a>    
            </td>
            <td><a href="#tab6">tab6</a>
            </td>
        </tr>
    </tbody>
</table>


.tab_links td {
  color: #fff;
  background-color: #66f;
}
a {
  color: inherit;
}
<table>
  <tbody class="tab_links">
    <tr>
      <td class="active"><a href="#tab1">tab1</a> 
      </td>
      <td><a href="#tab2">tab2</a> 
      </td>
      <td><a href="#tab3">tab3</a> 
      </td>
    </tr>
    <!--row 2-->
    <tr>
      <td><a href="#tab4">tab4</a> 
      </td>
      <td><a href="#tab5">tab5</a> 
      </td>
      <td><a href="#tab6">tab6</a>
      </td>
    </tr>
  </tbody>
</table>

References:

  1. The browser will, as demonstrated, ignore that though and wrap the (optional) <tbody> around <tr> elements if they're not already present.

Upvotes: 6

Guyson C.U
Guyson C.U

Reputation: 50

Edit background:#7fb5da; to background-color:#7fb5da;

Upvotes: -2

trex005
trex005

Reputation: 5135

Add that class to the <tr> and remove the div:

<table>
    <!--profile-->
    <tr><td colspan="3">profile</td></tr>
    <!--tabs 2 rows-->
    <!--row 1-->
    <tr class="tab_links">
        <td class="active"><a href="#tab1">tab1</a></td>
        <td><a href="#tab2">tab2</a></td>
        <td><a href="#tab3">tab3</a></td>
    </tr>
    <!--row 2-->
    <tr class="tab_links">
        <td><a href="#tab4">tab4</a></td>
        <td><a href="#tab5">tab5</a></td>
        <td><a href="#tab6">tab6</a></td>
    </tr>
    <!--detail of tab-->
    <tr><td colspan="3">detail of tab</td></tr>

</table>

Demo: http://jsfiddle.net/trex005/2L7d86p2/

Upvotes: 0

Shaban Khan
Shaban Khan

Reputation: 156

Please remove the <div class="tab_links"> and add this class to table then it will work Thanks

Upvotes: 0

Related Questions