When I use a class selector to modify the width of an element it does not work. When I use a tag and class selector as in table.change-name
it does work.
HTML:
<!-- start settings -->
<div class='settings'>
<h4>Account Settings</h4>
<table class='options'>
<tr>
<td class='name username'>Name</td>
<td class='value'>Robert Rocha</td>
<td class='edit'><a href='#'>Edit</a></td>
</tr>
<tr>
<td class='name email'>Email</td>
<td class='value'>tom@gmail.com</td>
<td class='edit'><a href='#'>Edit</a></td>
</tr>
<tr>
<td class='name pword' colspan='2'>Password</td>
<td class='edit'><a href='#'>Edit</a></td>
</tr>
<tr>
<td class='name remove-all' colspan='3'><a href='#'>Delete All Photos</a></td>
</tr>
<tr>
<td class='name remove-account' colspan='3'><a href='#'>Delete Account</a></td>
</tr>
</table>
<table class='change-name'>
<tr>
<td class='first'>First</td>
<td><input type='text' name='fname' class='fname'></td>
</tr>
<tr>
<td class='middle'>Middle</td>
<td><input type='text' name='mname' class='mname'></td>
</tr>
<tr>
<td class='last'>Last</td>
<td><input type='text' name='lname' class='lname'></td>
</tr>
<tr>
<td class='save'><a href='#'>Save</a></td>
<td class='cancel'><a href='#'>Cancel</a></td>
</tr>
</table>
</div>
<!-- end settings -->
CSS:
/* Settings */
.settings {
width: 650px;
margin: 0 auto;
padding: 1em;
}
.settings h4 {
padding: 1em 0;
letter-spacing: 1px;
border-bottom: 1px solid #cacece;
}
.settings table {
width: 100%;
font-size: 0.9em;
letter-spacing: 1px;
font-weight: 200;
table-layout: fixed;
}
.settings tr { border-bottom: 1px solid #cacece; }
.settings td { padding: 0.5em 0; }
.settings .edit { text-align: right; }
.settings .name { font-weight: bold; }
.settings .remove-all, .settings .remove-account { font-weight: 200; }
/* Change Name Table */
.change-name {
background: #cacece;
width: 300px;
}
.change-name tr { border: none; }
Result: https://jsfiddle.net/yy1mu2ze/
If I do the following:
table.change-name {
background: #cacece;
width: 300px;
}
I get: https://jsfiddle.net/yy1mu2ze/1/
Why is this?