Not working th text-align

3

My code that has the problem is this:

html:

  <body>
    <table class="default_grid">
      <thead>
        <tr>
          <th class="opcao1">Opção 1</th>
          <th class="opcao2">Opção 2</th>
        </tr>
      </thead>
    </table>
  </body>

css:

{
  background-color: aliceblue;
}

.default_grid {
  text-align: left;
  width: 600px;
  color: white;
}

.default_grid .opcao1 {
  background-color: purple;
}

.default_grid .opcao2 {
  background-color: orange;
}

The problem appears in internet explorer, the testo is centralized, not aligned on the left, how to solve this?

{
  background-color: aliceblue;
}
.default_grid {
  text-align: left;
  width: 600px;
  color: white;
}
.default_grid .opcao1 {
  background-color: purple;
}
.default_grid .opcao2 {
  background-color: orange;
}
<body>
  <table class="default_grid">
    <thead>
      <tr>
        <th class="opcao1">Opção 1</th>
        <th class="opcao2">Opção 2</th>
      </tr>
    </thead>
  </table>
</body>
    
asked by anonymous 31.01.2016 / 12:19

1 answer

3

Different browsers apply the W3C recommendations differently. Internet Explorer does not allow inheritance of the text-align property in <th> , which is automatically centered. So you have to apply the rule to th itself:

.default_grid th { text-align: left;}
    
31.01.2016 / 13:23