Tue, 2009-08-18 16:57
How can I make my table to auto-size based on its contents, right now it always displays 100% width.
my css has following code:
.mainTable1
{
table-layout: auto;
}
I also tried the following:
.mainTable1
{
width: auto;
}
Thanks for your help.
Wed, 2009-08-19 03:39
#1
Tables auto-size to fit content by default
Tables unstyled grow to fit their content by default. I did a real quick page for you to see what I mean. I might be getting your question wrong though.
Check out my test page for you real quick.
http://www.cornerpixel.net/demo/basics/table-width.htm
The markup and CSS is below. (it's basic stuff with inline style, just to show how tables work by default, without any width declaration.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Test Table Stuff</title> <style type="text/css"> table { border: 1px solid; } td { border: 1px solid Red; } </style> </head> <body> <h1>Table Width</h1> <table> <tr> <td> <p>This is the content, how big am I?</p> </td> <td> <p>This is the other td</p> </td> </tr> </table> <table> <tr> <td> <p>This is the content, how big am I?</p> </td> <td> <p>This is the next table and the second TD. Notice that this table is bigger and the TD is too!</p> </td> </tr> </table> <p>Do you see how when you size the window down to be smaller the first Column (TD) is different size even though it has the same content as the column in the top table.</p> <p>This tables have <strong>NO</strong> width declaration either in markup or CSS</p> </body> </html>
Do you have a link to your site so that I can see what issue you are having, because from the question I was unsure.