Text align in IE changes

Question

body {
  text-align: left;
  color: #000810;
}
.settings-edit-table {
  width: 100%;
  margin: 15px 0 15px;
}
.settings-edit-table th,
.settings-edit-table td {
  padding: 0 0 8px;
  vertical-align: top;
  line-height: 29px;
}
.settings-edit-table th {
  width: 110px;
  padding-right: 10px;
}
.settings-edit-table input {
  width: 388px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  color: #808080;
  font: inherit;
  line-height: 17px;
  padding: 5px 10px;
}

<table class="settings-edit-table">
  <tbody>
    <tr>
      <th scope="row">Name</th>
      <td>
        <input name="firstName" id="firstName" value="test" type="text">
      </td>
    </tr>

    <tr>
      <th scope="row">Surname</th>
      <td>
        <input name="lastName" id="lastName" value="test" type="text">
      </td>
    </tr>



    <tr>
      <th scope="row">Phone</th>
      <td>
        <input name="phone" id="phone" value="6666666" type="text">
      </td>
    </tr>

    <tr>
      <th scope="row">E-mail</th>
      <td>
        <input name="email" id="email" value="test@gmail.com" type="email">
      </td>
    </tr>


  </tbody>
</table>

For row names text alignment is left, in Chrome, Firefox everything works fine. For some reasons in internet explorer the text align is centered. Any suggestions to fix this issue? Here is also fiddle link

Answer 1

 .settings-edit-table th,
 .settings-edit-table td {
    padding: 0 0 8px;
   vertical-align: top;
   line-height: 29px;
   text-align:left; //add text-align property
 }

Answer 2

Add This Property

.settings-edit-table th{text-align:left}