CODEWITHSUNDEEP
css
edA-qa mort-ora-y
edA-qa mort-ora-y

Reputation: 31861

How to minimize width of a table column (expand one column)?

I have a simple two column table where the left shows line numbers and the right shows code. I want the left-side to be the smallest size without clipping, and the right side to fill the remaining area (the whole table should be a 100% width).

<table>
  <tr>
     <td><pre>line numbers</pre></td>
     <td><pre>code</pre></td>
  </tr>
</table>

The problem is that if the content on the right isn't large enough the extra space will also be balanced to the left (the line number column gets wider than it needs to be). How can I force all extra space to go into the right column?

Upvotes: 11

Views: 16656

Answers (4)

theo
theo

Reputation: 137

Another solution is:

td:first-child { width: 1% }

It won't crop your content, but will makes first column as small as possible

Upvotes: 10

Wilson
Wilson

Reputation: 608

Another way to do it:

td:nth-child(2) { width: 100%; }

JSFiddle: http://jsfiddle.net/SabdielRivera/n84xf/5/

Upvotes: 8

user3162070
user3162070

Reputation: 21

You can set the td twidth to be width:100% to achieve what you need. Here's a fiddle

Upvotes: 2

Blake Mann
Blake Mann

Reputation: 5490

Just set the second td in every row to be width: 100%; ... Table cells can't break to a new row if their width exceeds the container, so it will just force everything to fit as closely to your styles as it can. So, setting a 100% width on one column, and no setting on the other will make the cells in that column as wide as they can be.

See fiddle: http://jsfiddle.net/tvEY3/

Upvotes: 13

Related Questions