1 reply [Last post]
patientd1
Offline
newbie
Last seen: 5 years 10 weeks ago
Joined: 2009-08-18
Posts: 1
Points: 0

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.

MikePixel
MikePixel's picture
Offline
Enthusiast
Everett, WA
Last seen: 19 weeks 2 days ago
Everett, WA
Timezone: GMT-7
Joined: 2008-06-20
Posts: 91
Points: 8

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.