anatp_123 anatp_123 - 3 months ago 15
CSS Question

How do I control the width of the last column?

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

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.