CODEWITHSUNDEEP
css
anatp_123
anatp_123

Reputation: 1205

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;
    }

Upvotes: 2

Views: 2682

Answers (1)

JanR
JanR

Reputation: 6130

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.

Upvotes: 4

Related Questions