htmlcss

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}
  • i want to apply it on td's of table having ID ''ToBeApplied''.
  • I do not want to write a class and write same on each td of table
  • I do not want it to apply on td's of second table have ID ''NotToBeApplied''

How to modify HTML and CSS to achieve above?


Solution

  • 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>