CODEWITHSUNDEEP
htmlcss
fatherazrael
fatherazrael

Reputation: 5957

How to apply CSS to td of particular table?

How to apply CSS to td of one particular table; excluding all other tables in web page?

<table class="pure-table fullWidth" id="ToBeApplied">
 <tbody>
  <tr class="pure-table-odd">
   <td>
    <label>Bank</label>
   </td>
   <td>
    <label>Japha Bank</label>
   </td>
  </tr>
 </tbody>
</table>
<table class="pure-table fullWidth" id="NotToBeApplied">
 <tbody>
  <tr class="pure-table-odd">
   <td>
    <label>Bank</label>
   </td>
   <td>
    <label>Japha Bank</label>
   </td>
  </tr>
 </tbody>
</table>

I want to apply CSS say

td {padding:23px;font-weight:bold}

How to modify HTML and CSS to achieve above?

Upvotes: 8

Views: 24088

Answers (4)

sanjeev shetty
sanjeev shetty

Reputation: 458

Use CSS selectors like,

#ToBeApplied td {
  padding:23px;
  font-weight:bold;
}

Upvotes: 7

Sowmya
Sowmya

Reputation: 26969

This should work (Assuming that you dont want to specify id for table)

table.pure-table:first-child td {padding:23px;font-weight:bold}

DEMO

Upvotes: 3

Shrinivas Shukla
Shrinivas Shukla

Reputation: 4453

This is what you want.

Check out this fiddle.

#ToBeApplied td {
    padding:23px;
    font-weight:bold
}

Here is the snippet.

#ToBeApplied td {
  padding: 23px;
  font-weight: bold
}
<table class="pure-table fullWidth" id="ToBeApplied">
  <tbody>
    <tr class="pure-table-odd">
      <td>
        <label>Bank</label>
      </td>
      <td>
        <label>Japha Bank</label>
      </td>
    </tr>
  </tbody>
</table>
<table class="pure-table fullWidth" id="NotToBeApplied">
  <tbody>
    <tr class="pure-table-odd">
      <td>
        <label>Bank</label>
      </td>
      <td>
        <label>Japha Bank</label>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 2

MarmiK
MarmiK

Reputation: 5775

Just add style below:

<style type="text/css">
    #ToBeApplied tr td{padding:23px;font-weight:bold}
</style>

One can limit the CSS application using the parent ahead of the style..

I hope this will help you achieve what you need!

Upvotes: 1

Related Questions