HTML / CSS Question Re Tables?

Hello all, is it possible to increase the width of a table but not stretch the cells within it? ie imagine this: ---------------------------------------------- < width of table | | | | < nothing ness > < cells im trying to design a horizontal menu with variable width menu items but i want the border at the bottom to be constant without stretching the cell to fit the constant width. I hope I have made myself clear! Those suggestions work until i add another TR to the table then it all goes skew wiff in IE but not firefox.... Yeah i know firefox is better but we need to cater to the masses in web design :)

Public Comments

  1. i can't get it
  2. at the end of the table row, add another table cell which you can leave blank. Use the HTML width-property or CSS width property to tell the browser that each previous table cell of the horizontal menu is of a fixed size. Also add width=100% to the table tag. For example: <table width="100%" style="border-bottom: 1px black solid"> <tr> <td width="50">Menu item 1</td> <td width="50">Menu item 2</td> <td></td> </tr> </table>
  3. are you saying to increase the width of the table without increasing the width of the individual cells? Then force a width for the cells and have one additional cell with variable width to use up the remaining space. <table width=600> <tr> <td width="200">cell 1</td> <td width="200">cell 2</td> <td>Extra cell with no width specified</td> </tr> </table>
  4. Well, what dieterdobbelaere suggested is the only trick (to end the menu items with an empty <th>/<td> tag). Only that since you would like the menu items to be variable width, then you don't have to specify width for the <th>/<td> tags as he said. If you would like to centre the menu items within the table, then you should start with an empty <th>/<td> tag as well. <html> <body> <table width="100%" border="1"> <tr width="100%"> <td></td> <td> Item1</td> <td> Item2</td> <td> Item3</td> <td></td> </tr> </table> </body> </html>
  5. Why not use CSS and make it a proper menu list? Here is an example from http://css.maxdesign.com.au/listamatic/horizontal01.htm <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> CSS #navlist li { display: inline; list-style-type: none; padding-right: 20px; } Use CSS to style it anyway you want. Check out these fancy styles in the Horizontal list section of listamatic. Rollover horizontal list navbar http://css.maxdesign.com.au/listamatic/horizontal03.htm Eric Meyer's tabbed navbar http://css.maxdesign.com.au/listamatic/horizontal05.htm and a bunch more http://css.maxdesign.com.au/listamatic/
  6. You could try nested tables. It's a table inside a table, that way you could stretch the outside table and not harm the cells inside. i.e. <table width="100%"> <table align="center" width="80%"> <tr> <td>menu1</td> <td>menu2</td> </tr> </table> </table> This way, your outer table can adjust it's size while inner table stays the same.
Powered by Yahoo! Answers