anatp_123 anatp_123 - 1 year ago 79
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

and the 'Replacement' and 'Additional test' will always be yes/no text.

I made a

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 Source

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 */
   /* 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:


If you want to alter the markup, use css classes instead.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download