CSS not working in Chrome if I add it in the <style> element

Question

I have a simple table with styles applied via inline CSS, and it is working. But when I try to add the CSS to the document via the element, it doesn't work in Chrome. I checked the W3Schools CSS tutorials, but couldn't find a solution.

My code is this:

<!DOCTYPE html>
<html>
   <head>
      <style type="text/css">
         tr {
         border: solid 1px black; 
         padding-left: 7px; 
         padding-right: 7px;
         }
      </style>
   </head>
   <body>
      <table id="t01" style="border: 1px solid black; background-color: #E4E5E0; margin-left: 40px;">
         <tr style="border: 1px solid black;">
            <th>Available<br>On</th>
            <th>Ids</th>
         </tr>
         <tr>
            <td style="border: solid 1px black; padding-left: 7px; padding-right: 7px;"><b>Phone</b></td>
            <td style="border: solid 1px black; padding-left: 7px; padding-right: 7px;"><b>9999999
            </td>
         </tr>
      </table>
      <br><br>
      <table id="t01" style="border: 1px solid black; background-color: #E4E5E0; margin-left: 40px;">
         <tr style="border: 1px solid black;">
            <th style="border: solid 1px black; padding-left: 7px; padding-right: 7px;">Available<br>On</th>
            <th style="border: solid 1px black; padding-left: 7px; padding-right: 7px;">Ids</th>
         </tr>
         <tr>
            <td style="border: solid 1px black; padding-left: 7px; padding-right: 7px;"><b>Phone</b></td>
            <td style="border: solid 1px black; padding-left: 7px; padding-right: 7px;"><b>9999999
            </td>
         </tr>
      </table>
   </body>
</html>

https://www.w3schools.com/code/tryit.asp?filename=FIDUIS25NER6

Out put:

You need not specify type="text/css".Simple <style></style> would do. — Hema Nandagopal
– Hema Nandagopal, Commented Aug 9, 2017 at 14:28
Try clearing cache or open your webpage in private browsing probably your changes are not pritning — AutoTester213
– AutoTester213, Commented Aug 9, 2017 at 14:29
What exactly is “not working”? And why are you only showing us code that has inline styles applied and uses a style element in the head? — C3roe
– C3roe, Commented Aug 9, 2017 at 14:31
Inspect the DOM and see whether you actually see that style tag there. Right click and go to Inspect and then find the Elements tab. — taronish4
– taronish4, Commented Aug 9, 2017 at 14:34
If everything properly set, you need to clear cache data in your web browser. This also happened to me when using chrome — Blasanka
– Blasanka, Commented Aug 9, 2017 at 14:36

Pankaj Kumar Gautam · Accepted Answer · 2017-08-09 15:31:26Z

2

Change your CSS to the following. It has a typo.

<style>
     th {
     border: 1px solid black; 
     padding-left: 7px; 
     padding-right: 7px;
     }
</style>

If you want to add border to tr visit this link.

edited Aug 9, 2017 at 15:31

Pankaj Kumar Gautam

3412 silver badges11 bronze badges

answered Aug 9, 2017 at 14:40

Lime

13.6k12 gold badges59 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luiz Gonçalves · Accepted Answer · 2017-08-09 14:42:41Z

0

Change this:

border: solid 1px black;

to this:

border: 1px solid black;

answered Aug 9, 2017 at 14:42

Luiz Gonçalves

5474 silver badges11 bronze badges

Comments

Pankaj Kumar Gautam · Accepted Answer · 2017-08-09 15:02:31Z

0

<style type="text/css">
     th {
     border: solid 1px black; 
     padding-left: 7px; 
     padding-right: 7px;
     }
 </style>

Actually in your code your are giving border to tr which does not make sense click here to know more.

So replace tr to th in your above code and it work.

answered Aug 9, 2017 at 15:02

Pankaj Kumar Gautam

3412 silver badges11 bronze badges

Collectives™ on Stack Overflow

CSS not working in Chrome if I add it in the <style> element

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related