Html - Apply CSS to all the elements inside TH tag

udss
March 8, 2024
96 views
0 votes
2 Answers

I would like to check if there is any easiest way of doing the below task

I want to apply font-size:10px to the TD tag of the table, but also it should override all the elements inside TH font-size to 10px, no matter what tag it has like or or or anything.

Your help would appreciated
Please check below code for reference

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

.table_tr td {
  font-size: 12px;
}

.table_span span {
  font-size: 14px;
}

.table_div div {
  font-size: 18px;
}

<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Table with Inputs, Span, and Div</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    
    th,
    td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    
    th {
      background-color: #f2f2f2;
    }
    
    .table_tr td {
      font-size: 12px;
    }
    
    .table_span span {
      font-size: 14px;
    }
    
    .table_div div {
      font-size: 18px;
    }
  </style>
</head>

<body>

  <table>

    <head>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Action</th>
      </tr>
      </thead>

      <body>
        <tr class="table_tr">
          <td><input type="text" placeholder="Enter name"></td>
          <td><input type="email" placeholder="Enter email"></td>
          <td>
            <span class="table_span">Some text</span>
            <div class="table_div">Some content</div>
          </td>
        </tr>
        <tr>
          <td><input type="text" placeholder="Enter name"></td>
          <td><input type="email" placeholder="Enter email"></td>
          <td>
            <span class="table_span">Some text</span>
            <div class="table_div">Some content</div>
          </td>
        </tr>
        <tr>
          <td><input type="text" placeholder="Enter name"></td>
          <td><input type="email" placeholder="Enter email"></td>
          <td>
            <span class="table_span">Some text</span>
            <div class="table_div">Some content</div>
          </td>
        </tr>
        </tbody>
  </table>

Tags: css html

Answers

First of all there is typo error of thead opening tag, Second If you want to apply particular css to all child element of your fiddle/code then you can simply use that css on body *. like this

 body *{
      font-size:10px !important;
    }

You can also check working codepan here where font-size is applying to all tags like td,th,div and span etc.

Codepan :

table {
      border-collapse: collapse;
      width: 100%;
    }
    
    th,
    td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    
    th {
      background-color: #f2f2f2;
    }
    
    .table_tr td {
      font-size: 12px;
    }
    
    .table_span span {
      font-size: 14px;
    }
    
    .table_div div {
      font-size: 18px;
    }
    body *{
      font-size:10px !important;
    }

<table>

    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Action</th>
      </tr>
      </thead>

      <body>
        <tr class="table_tr">
          <td><input type="text" placeholder="Enter name"></td>
          <td><input type="email" placeholder="Enter email"></td>
          <td>
            <span class="table_span">Some text</span>
            <div class="table_div">Some content</div>
          </td>
        </tr>
        <tr>
          <td><input type="text" placeholder="Enter name"></td>
          <td><input type="email" placeholder="Enter email"></td>
          <td>
            <span class="table_span">Some text</span>
            <div class="table_div">Some content</div>
          </td>
        </tr>
        <tr>
          <td><input type="text" placeholder="Enter name"></td>
          <td><input type="email" placeholder="Enter email"></td>
          <td>
            <span class="table_span">Some text</span>
            <div class="table_div">Some content</div>
          </td>
        </tr>
        </tbody>

As commented before your HTML and CSS has several issues

Make sure all elements are closed/nested correctly:
Like <thead> but also <tbody>

Before overriding any style rules you should also check the more general (so inherited by child/descendant elements) rules – maybe you can remove some:

    .table_span span {
      font-size: 14px;
    }
    
    .table_div div {
      font-size: 18px;
    }

don’t select anything – these rules translate to:
find element with class .table_span and select a span child element inside. But the used span elements have this class. So it should be:

    .table_span{
      font-size: 14px;
    }

or (not recommended – since unnecessarily specific)

    span.table_span{
      font-size: 14px;
    }

From your description you want your table font size to be normalized to 10px.
Therefore, just remove these rules and set a general font-size to your table.

/* general rule for all tables */
table{
  border-collapse: collapse;
  width: 100%;
  font-size: 10px;
  line-height:1.2em;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

/* table cell child/decendant elements */
th *,
td *{
  font-family:inherit;
  font-size: inherit;
}

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table_tr">
      <td><input type="text" placeholder="Enter name"></td>
      <td><input type="email" placeholder="Enter email"></td>
      <td>
        <span class="table_span">Some text</span>
        <div class="table_div">Some content</div>
      </td>
    </tr>
    <tr>
      <td><input type="text" placeholder="Enter name"></td>
      <td><input type="email" placeholder="Enter email"></td>
      <td>
        <span class="table_span">Some text</span>
        <div class="table_div">Some content</div>
      </td>
    </tr>
    <tr>
      <td><input type="text" placeholder="Enter name"></td>
      <td><input type="email" placeholder="Enter email"></td>
      <td>
        <span class="table_span">Some text</span>
        <div class="table_div">Some content</div>
      </td>
    </tr>
  </tbody>
</table>

Rule of thumb: define your styles from general rule to exception

If you need too many overriding rules (i.e exceptions by requiring !important or nested selectors) you should consider to simplify your main rules.

You may also have loads of other tables or elements on your page – so be careful with to global style rules.

If you’re uncertain if you may need some styles just disable them via comments like so:

body {
  font-family: Georgia;
  font-size: 18px, line-height:1.4em;
}


/* general rule for all tables */

table {
  font-family: sans-serif;
  border-collapse: collapse;
  width: 100%;
  font-size: 10px;
  line-height: 1.2em;
}

th,
td {
  font-family: inherit;
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}


/* table cell child/decendant elements */

th *,
td * {
  font-family: inherit;
  font-size: inherit;
}


/* we don't need these class selctor - do we? */


/*
.table_tr td{
  font-size: 12px;
}

.table_span  {
  font-size: 14px;
}

.table_div {
   font-size: 18px;
}
*/

<h1>Font size not inherited to table</h1>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>

<p>He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>


<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table_tr">
      <td><input type="text" placeholder="Enter name"></td>
      <td><input type="email" placeholder="Enter email"></td>
      <td>
        <span class="table_span">Some text</span>
        <div class="table_div">Some content</div>
      </td>
    </tr>
    <tr>
      <td><input type="text" placeholder="Enter name"></td>
      <td><input type="email" placeholder="Enter email"></td>
      <td>
        <span class="table_span">Some text</span>
        <div class="table_div">Some content</div>
      </td>
    </tr>
    <tr>
      <td><input type="text" placeholder="Enter name"></td>
      <td><input type="email" placeholder="Enter email"></td>
      <td>
        <span class="table_span">Some text</span>
        <div class="table_div">Some content</div>
      </td>
    </tr>
  </tbody>
</table>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Apply CSS to all the elements inside TH tag

Answers