Make sure a table is not wider than its parent

Page 1 of 1

2 Replies - 1788 Views - Last Post: 04 February 2011 - 02:49 AM

#1 gretty  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 122
  • Joined: 25-May 09

Make sure a table is not wider than its parent

Posted 03 February 2011 - 08:19 PM

Hello

I have a table that sits within a div element. And I am trying to figure out how to make sure that the table's width will never extend beyond its parent div elements width.

I have my attempts below, which I encourage people to run because you will see the overflow issue clearly. How can I make sure that my table will not have a width greater than its parents divs width(which is 60% of the screen right now)?

My 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>

<style type="text/css" >
<!--

	body {
	font: 100%/1.4 Helvetica, Verdana, Arial sans-serif;
	height: 100%;
	margin: 0;
	background-image: url(../Images/BGshadowEx.jpg);
	background-repeat: repeat-x;
	padding: 0;
	color: #000;
	padding-top: 5%;
	font-size: 0.8em;
}
	table.gallery { max-height: 400px; max-width: 400px;  }
	
	tr.galleryRow { max-height: 200px; max-width: 400px;  }
	
	td.picViewer { background-color: #9F3; overflow:scroll; max-height: 200px; max-width: 100px;  }
	
	.a { float: left; width: 20%; height: 100%; background-color: yellow; }
	
	.b { float: left; width: 60%; height: 100%; background-color: blue;}
	
	.c { float: left; width: 20%; height: 100%; background-color: green; }
-->
</style>

</head>
<body>

	<div class="a">
        <p> abcd </p>
    </div>

    <div class="b">
        <p> abcd </p>
        <table class="gallery">
            <tr class="galleryRow">
                <td class="picViewer"> aaaaaaaaaaaaaaaaaaa</td>
                <td class="picViewer"> aaaaaaaaaaaaaaaaaaa</td>
                <td class="picViewer"> aaaaaaaaaaaaaaaaaaa</td>
                <td class="picViewer"> aaaaaaaaaaaaaaaaaaabbbbbbbbb</td>
            </tr>
            <tr class="galleryRow">
               <td class="picViewer"> aaaaaaaaaaaaaaaaaaa</td>
               <td class="picViewer"> aaaaaaaaaaaaaaaaaaa</td>
               <td class="picViewer"> aaaaaaaaaaaaaaaaaaa</td>
               <td class="picViewer"> aaaaaaaaaaaaaaaaaaabbbbbbbbbb</td>
            </tr>
        </table>
    </div>
    
    <div class="c">
        <p> abcd </p>
    </div>
    

</body>
</html>

This post has been edited by gretty: 03 February 2011 - 08:21 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Make sure a table is not wider than its parent

#2 ClearRift  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 37
  • Joined: 09-December 10

Re: Make sure a table is not wider than its parent

Posted 03 February 2011 - 09:25 PM

Hello Getty,

I couldn't replicate the table growing larger than its parent div as you've set all the max widths. But I did see that the contents of the picViewer td's was overflowing.

You have explicitly declared the overflow for these elements:
overflow:scroll;


I would look to some of the other arguments that are possible for the overflow attribute, such as 'hidden'.
Was This Post Helpful? 0
  • +
  • -

#3 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: Make sure a table is not wider than its parent

Posted 04 February 2011 - 02:49 AM

The min- and max- dont work in all browsers.

As said above, use overflow: on your troublesome elements, overflow:hidden set to the parent div will stop the table showing outside however wont show the extra info.

Bere in mind padding, indent, borders and margin are additional to width settings.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1