Expand container to dynamic table width

Hello experts!

I have a table with dynamic fields (meaning extra fields configured by the users) which currently flows over the container as illustrated in the code.

How can I have the container adapt to the dynamic width of the table?
<div style="width:100px; border:1px solid black">
	<table>
		<tr>
			<td>Test1</td>
			<td>Test2</td>
			<td>Test3</td>
			<td>Test4</td>
		</tr>
	</table>
</div>

Open in new window

LVL 3
GudmundiusAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LZ1Commented:
You can do width 100%, but then also specify that in the table as well.
 

<div style="width:100px; border:1px solid black"> 
        <table width="100%"> 
                <tr> 
                        <td width="100%">Test1</td> 
                        <td width="100%">Test2</td> 
                        <td width="100%">Test3</td> 
                        <td width="100%">Test4</td> 
                </tr> 
        </table> 
</div>

Open in new window

0
GudmundiusAuthor Commented:
Sorry, should have added the other requirement:

The container must be atleast a given width. So that if the content has a smaller width than the container, the container should have the given width.
0
LZ1Commented:
So the DIV needs to be 100px wide or the is there another container that I missed?
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

rg20Commented:
Are there more components in the container which might be pushing it to be larger?

If not, then just set the tablesize and forget setting the div size.
0
GudmundiusAuthor Commented:
By container I mean the div.

I can't set the tablesize in a good way as it has dynamic columns.
0
LZ1Commented:
So then you can set the div to 100% and leave the table width out and it should automatically size itself according to the content
0
rg20Commented:
Set the table to 100%, leave the div without a size and it should size accordingly.

If you want the table to take the whole screen,

The div tag is just a container to hold objects, doesn't necessarily have to control sizes.
0
rg20Commented:
Ignore last comment,
If you cant set the tablesize, how do you expect the div to handle the size.

You can set the columns to a predetermined size and let the text wrap

<table border=1 width=183 style='table-layout:fixed'>
 <col width=67>
 <col width=75>
 <col width=41>
 <tr>
  <td>First Column</td>
  <td>Second Column</td>
  <td>Third Column</td>
 </tr>
 <tr>
  <td>Row 1</td>
  <td>Text</td>
  <td align=right>1</td>
 </tr>
 <tr>
  <td>Row 2</td>
  <td>Abcdefg</td>
  <td align=right>123</td>
 </tr>
 <tr>
  <td>Row 3</td>
  <td>Abcdefghijklmnop</td>
  <td align=right>123456</td>
 </tr>
</table>
0
GudmundiusAuthor Commented:
Here you can see the actual table, and two grey lines at the sides. The grey lines are the borders of the containing div. The div is in a layout file, so it applies to all pages, also pages that only have text. So I want to have a default width that is used unless the content of it doesn't fit inside it.

If the content doesn't fit inside the default width, I want the container to stretch so that it wraps the content.

Is it possible?
table-width.png
0
LZ1Commented:
Like this?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="border:1px solid black"> 
        <table width="75%" style="WORD-BREAK:BREAK-ALL; "> 
                <tr> 
                        <td>Test1
                  <p>Quis nostrud exercitation in reprehenderit in voluptate ut labore et dolore magna aliqua. Velit esse cillum dolore ut enim ad minim veniam, duis aute irure dolor. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Qui officia deserunt sed do eiusmod tempor incididunt consectetur adipisicing elit.</p></td> 
                        <td><p>Test2</p>
                  <p>Quis nostrud exercitation in reprehenderit in voluptate ut labore et dolore magna aliqua. Velit esse cillum dolore ut enim ad minim veniam, duis aute irure dolor. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Qui officia deserunt sed do eiusmod tempor incididunt consectetur adipisicing elit.</p></td> 
                        <td><p>Test3</p>
                  <p>Quis nostrud exercitation in reprehenderit in voluptate ut labore et dolore magna aliqua. Velit esse cillum dolore ut enim ad minim veniam, duis aute irure dolor. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Qui officia deserunt sed do eiusmod tempor incididunt consectetur adipisicing elit.</p></td> 
                        <td><p>Test4</p>
                        <p>Quis nostrud exercitation in reprehenderit in voluptate ut labore et dolore magna aliqua. Velit esse cillum dolore ut enim ad minim veniam, duis aute irure dolor. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Qui officia deserunt sed do eiusmod tempor incididunt consectetur adipisicing elit.</p></td> 
                </tr> 
        </table> 
</div>
</body>
</html>

Open in new window

0
LZ1Commented:
Oops...forgot something:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="width: 80%; border:1px solid black"> 
        <table width="75%" style="WORD-BREAK:BREAK-ALL; "> 
                <tr> 
                        <td>Test1
                  <p>Quis nostrud exercitation in reprehenderit in voluptate ut labore et dolore magna aliqua. Velit esse cillum dolore ut enim ad minim veniam, duis aute irure dolor. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Qui officia deserunt sed do eiusmod tempor incididunt consectetur adipisicing elit.</p></td> 
                        <td><p>Test2</p>
                  <p>Quis nostrud exercitation in reprehenderit in voluptate ut labore et dolore magna aliqua. Velit esse cillum dolore ut enim ad minim veniam, duis aute irure dolor. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Qui officia deserunt sed do eiusmod tempor incididunt consectetur adipisicing elit.</p></td> 
                        <td><p>Test3</p>
                  <p>Quis nostrud exercitation in reprehenderit in voluptate ut labore et dolore magna aliqua. Velit esse cillum dolore ut enim ad minim veniam, duis aute irure dolor. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Qui officia deserunt sed do eiusmod tempor incididunt consectetur adipisicing elit.</p></td> 
                        <td><p>Test4</p>
                        <p>Quis nostrud exercitation in reprehenderit in voluptate ut labore et dolore magna aliqua. Velit esse cillum dolore ut enim ad minim veniam, duis aute irure dolor. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Qui officia deserunt sed do eiusmod tempor incididunt consectetur adipisicing elit.</p></td> 
                </tr> 
        </table> 
</div>
</body>
</html>

Open in new window

0
GudmundiusAuthor Commented:
Not exactly. I want the div to stretch. You can see it doesn't with this code.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="width: 100px; border:1px solid black"> 
        <table width="75%"> 
                <tr> 
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                </tr> 
        </table> 
</div>
</body>
</html>

Open in new window

0
blueghoztCommented:
you will need to float the div for it to stretch


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="float:left; width: 100px; border:1px solid black"> 
        <table width="75%"> 
                <tr> 
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                </tr> 
        </table> 
</div>
</body>
</html>

Open in new window

0
blueghoztCommented:
sorry should have changed your width to min-width
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="float:left; min-width: 100px; border:1px solid black"> 
        <table width="75%"> 
                <tr> 
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                </tr> 
        </table> 
</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GudmundiusAuthor Commented:
Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.