Reputation: 799
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="[email protected]" 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
Upvotes: 0
Views: 39
Reputation: 2785
.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
}
Upvotes: 2