?
Solved

Expand container to dynamic table width

Posted on 2010-04-08
15
Medium Priority
?
343 Views
Last Modified: 2012-05-09
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

0
Comment
Question by:Gudmundius
  • 5
  • 5
  • 3
  • +1
15 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 30116154
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
 
LVL 3

Author Comment

by:Gudmundius
ID: 30117398
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
 
LVL 30

Expert Comment

by:LZ1
ID: 30117509
So the DIV needs to be 100px wide or the is there another container that I missed?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 9

Expert Comment

by:rg20
ID: 30119046
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
 
LVL 3

Author Comment

by:Gudmundius
ID: 30121567
By container I mean the div.

I can't set the tablesize in a good way as it has dynamic columns.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 30121659
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
 
LVL 9

Expert Comment

by:rg20
ID: 30121846
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
 
LVL 9

Expert Comment

by:rg20
ID: 30122074
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
 
LVL 3

Author Comment

by:Gudmundius
ID: 30123015
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
 
LVL 30

Expert Comment

by:LZ1
ID: 30124023
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
 
LVL 30

Expert Comment

by:LZ1
ID: 30124063
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
 
LVL 3

Author Comment

by:Gudmundius
ID: 30146682
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
 
LVL 6

Expert Comment

by:blueghozt
ID: 30191530
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
 
LVL 6

Accepted Solution

by:
blueghozt earned 2000 total points
ID: 30191661
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
 
LVL 3

Author Closing Comment

by:Gudmundius
ID: 31712304
Thanks!
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

599 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question