How do I control the width of the last column? - css

Question

When I add the width to the td it makes the th bigger.
If the last column has a lot of text but I don't want the width to show in the whole page, how do I control it?
I would still want to have the th be nowrap and the 'Replacement' and 'Additional test' will always be yes/no text.
I made a https://jsfiddle.net/6Lmt5vjc/
table.standardtable {
border: 1px solid #ddd;
}
table.standardtable th,
table.standardtable td {
padding: 5px 9px;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
text-align: left;
color: #000;
}
table.standardtable th{
background-color: #f3f3f3;
font-weight: bold;
}
table.standardtable th.section1{
background-color: #04659D;
color: #fff;
border-bottom: 1px solid #044971;
}

Answer 1

Use css selectors to find the last <td> and apply a max-width to it:
table.standardtable tr td:last-child{ /* last-child returns the last instance of the td */
max-width:150px;
/* additional styles as required */
}
Fiddle demo
One thing to note on your fiddle, don't use <td> and <th> mixed. <th> is a table header, where as <td> is a regular cell. Although technically your markup works it is not good practice.
Valid table would be something like:
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
If you want to alter the markup, use css classes instead.