IE中的文本对齐更改

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>

对于行名称文本对齐，在Chrome中，Firefox一切正常。出于某些原因，在Internet Explorer中，文本对齐是居中的。有什么建议来解决这个问题吗？这里也是小提琴link

Answer 1

添加此属性

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

Answer 2

 .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
 }