Not working <th> text-align

Asked

Viewed 89 times

3

My code that presents the problem and 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, testo is centered, not aligned on the left, how to solve it ?

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

html css
  • 2

    I think in IE you really have to put .default_grid th { text-align: left;}. You already tested that?

  • I just tested, solved! Post as answer to be able to score

1 answer

3


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

.default_grid th { text-align: left;}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.