April 29, 2012

HTML table issue (fixed left cell, right cell filling all rest of the content)

Question by John smith – optional

I need a help with a table that I can’t get right. It is a very simple table with only two cells (left and right):

<table>
   <tr>
     <td width="100px">
       my content 1
     </td>
     <td>
       my content2
     </td>
   </tr>
</table>

I want the one on the left to be of a fixed size (100px) and the right one to expand until the rest of the page.

The issue is that none of what I tried worked. If I leave as is, it will just be as big as “my content 2”.

I tried to put a hidden element (like an image) on the second to make sure it goes all the way, but on my small netbook, it goes above the size of the table and breaks it. So I can’t define a image to be as large as the screen.

Any other ideas? It should be simple, but I can’t get it done.

Answer by Zoltan Toth

Add width: 100% to your table

http://jsfiddle.net/rU9Tu/

Answer by Starx

Typically, table resizes to its content, so you need set table to take the full length available.

<table width="100%">
...
</table>

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!