• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1084
  • Last Modified:

Table max width in CSS

I need to set the max width of a table, I understand in firefox n netscape does support this in CSS, but it does not support in IE, is there any work around for this???
0
KenTan85
Asked:
KenTan85
  • 8
  • 6
1 Solution
 
Eric BourlandCommented:
You can do width:auto or width:100%. Also, try leaving out the width attribute from the selector in your CSS document. That should tell the browser to stretch the table as wide as the user's screen display.

Have I understood the question correctly?

HTH,

Eric
0
 
KenTan85Author Commented:
Hi eric, I do not want to set width 100% because some of my table is small, I do not want to stretch my table as wide as the user screen display.

I am having problem becoz some of my table is too big that exceed the user screen, that is why I need a max width css to solve this problem. In firefox n netscape, this is of no issue because max-width is supported in css but not in IE.
0
 
Eric BourlandCommented:
I understand now. Well, the max-width attribute is not supported in MSIE, as you noted.

But, why does your table exceed the width of the display screen? It should not do that. There's something else going on, I suspect. Are there any other CSS selectors that could be extending the width of the table?

For example, if you set a table width to 100%, and then add padding or a margin to that table, then the table will go off the screen.

Is that what is happening?

Eric
0
Ultimate Tool Kit for Technology Solution Provider

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 now.

 
KenTan85Author Commented:
Hi eric, yes you are correct, I had added left margin left for my table as there is indentation to be done for those table. Due to the reason of margin left, it went off the screen. That is the reason mi is looking at way to try to solve this by looking at the max width css,
0
 
Eric BourlandCommented:
Hi, I'll try to help.

You need to let the browser do its math. You will need to make the total width of the table -- including margin, padding, border -- equal exactly 100%.

So, maybe:

margin: 10% */ this sets 10% margin on all sides */
width: 70%
padding: 5%
border:0

... that equals 100%.

Does that make sense?
0
 
KenTan85Author Commented:
I know that you are trying do resize the table base on the margin that I had set. Currently I had left-margin my table to 0.4in

Sorry, I do not quite understand your css, becoz my left margin is base on inches measurement and how am I going to resize the table width into percent???
0
 
Eric BourlandCommented:
I understand. I suspected something like that.

The reason your table goes off the screen is, you are adding a specific measure -- 0.4in -- to 100% (or 90% or whatever).

Try using only percentage values.

Or -- can you set the table width to a specific value?

Try something like:

/* TABLE for KenTan85; total width = 100% ----------------- */

.table_KenTan85  {
width:80%;
margin:5%;
padding:5%;
border:0;
}

/* format table definition cells for table KenTan85 ----------------- */

.table_KenTan85 td      {
vertical-align:top;
padding:5px;
font: 12px arial,helvetica,verdana,sans-serif;
text-align:right;
}
0
 
KenTan85Author Commented:
Eric,
Your this solution would my other tables which is small to be 80% as well, which I do not want it to affect my small tables, as I do not want my other small tables to stretch.
0
 
Eric BourlandCommented:
Hi, Ken,

Well, in any case, you're going to need to make sure that your table, and its elements, add up to 100% or less.

An important concept: if you add a discrete measurement (like inches or pixels) to a percentage, you can cause your table to overlap the display screen.

The bottom line is math -- you need to let your browser have the chance to do the math.

Does this make sense?

If you like, send me your code and I will take a look.

Eric
0
 
KenTan85Author Commented:
Attached is the whole html of what mi is trying to do, it include both my small and big table. Thanks a lot Eric
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <style type="text/css">
 
.para-1		{
								margin-top: 12.0pt;
								margin-right: 0in;
								margin-bottom: 3.0pt;
								margin-left: 0in;
								text-align: justify;
								font-size: 12.0pt;
								font-family: Times New Roman;
								font-weight: normal;
								font-style: normal;
								}
								.para-2		{
								margin-top: 12.0pt;
								margin-right: 0in;
								margin-bottom: 3.0pt;
								margin-left: 0.4in;
								text-align: justify;
								font-size: 12.0pt;
								font-family: Times New Roman;
								font-weight: normal;
								font-style: normal;
 
								} </style>
 </HEAD>
 
 <BODY>
<p class="para-1"><a id="p1_138"></a>My first Para</span></p>
<p class="para-2"><table class="" border="1" cellpadding="0" cellspacing="0" frame="none" align="left" pgwide="1"><colgroup><col width="11.12%"><col width="88.88%"></colgroup><tbody><tr><td rowspan="1" class="" valign="top" align="left"> 
 
<p>Q:</p>
</td><td rowspan="1" class="" valign="top" align="left"> 
 
<p>$5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million </p></td></tr><tr><td rowspan="1" class="" valign="top" align="left"> 
 
<p>A:</p>
</td><td rowspan="1" class="" valign="top" align="left"> 
 
<p>Why borrow money if you do not need it?</p></td></tr><tr><td rowspan="1" class="" valign="top" align="left"> 
 
<p>Q:</p>
</td><td rowspan="1" class="" valign="top" align="left"> 
 
<p>Yes, you do not &#8211;</p></td></tr><tr><td rowspan="1" class="" valign="top" align="left"> 
 
<p>A:</p>
</td><td rowspan="1" class="" valign="top" align="left"> 
 
<p>If I needed $5million, $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million </p></td></tr><tr><td rowspan="1" class="" valign="top" align="left"> 
 
<p>Q:</p>
</td><td rowspan="1" class="" valign="top" align="left"> 
 
<p>Yes. You did not need the 6&nbsp;million, you only needed 5&nbsp;million, but you did need the key money, did you not?</p></td></tr></tr></tbody></table><br clear="left"><br clear="left"></p>
 
 
 
 
 
 
 
<p class="para-2"><table class="" border="1" cellpadding="0" cellspacing="0" frame="none" align="left" pgwide="1"><colgroup><col width="11.12%"><col width="88.88%"></colgroup><tbody><tr><td rowspan="1" class="" valign="top" align="left"> 
 
<p>Q:</p>
</td><td rowspan="1" class="" valign="top" align="left"> 
 
<p>$5million </p></td></tr><tr><td rowspan="1" class="" valign="top" align="left"> 
 
<p>A:</p>
</td><td rowspan="1" class="" valign="top" align="left"> 
 
<p>Why borrow money if you do not need it?</p></td></tr><tr><td rowspan="1" class="" valign="top" align="left"> 
 
<p>Q:</p>
</td><td rowspan="1" class="" valign="top" align="left"> 
 
<p>Yes, you do not &#8211;</p></td></tr><tr><td rowspan="1" class="" valign="top" align="left"> 
 
<p>A:</p>
</td><td rowspan="1" class="" valign="top" align="left"> 
 
<p>If I needed</p></td></tr><tr><td rowspan="1" class="" valign="top" align="left"> 
 
<p>Q:</p>
</td><td rowspan="1" class="" valign="top" align="left"> 
 
<p>Yes. You did not need the 6&nbsp;million, you only needed 5&nbsp;million, but you did need the key money, did you not?</p></td></tr></tr></tbody></table><br clear="left"><br clear="left"></p>
 
 </BODY>
</HTML>

Open in new window

0
 
Eric BourlandCommented:
Ken, I'm taking a look at this now. More soon.

Eric
0
 
Eric BourlandCommented:
Ken, try this. See attached.

I simplified the markup ("code") greatly. Take a look and you will see what I did.

The tables now expand and contract according to window size, with a 2% margin between table and page border.

Let me know if you have any questions?

Eric
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
    
  
  <style type="text/css">
  
  							
								/*style the table */
								
								.KenTable		{
								margin:2%;
								border-collapse:collapse; 
													} 
                                
								/*style the td */
								
                          		.KenTable td		{
								text-align: justify;
								font:12pt Times New Roman;
								border:1px solid #000;
								text-align:left;
								} 
                                                               
                                
                                </style>
                                
                                
                                
                                
 </HEAD>
 
 <BODY>
<a id="p1_138"></a>
 
 
 
 
<p>My first Para</p>
 
 
 
<table class="KenTable">
 
<!-- Use colgroup attribute to set column widths -->
 
<colgroup><col width="9%"><col width="88%"></colgroup>
 
<tbody><tr><td> 
 
<p>Q:</p>
</td><td> 
 
<p>$5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million </p></td></tr><tr><td> 
 
<p>A:</p>
</td><td> 
 
<p>Why borrow money if you do not need it?</p></td></tr><tr><td> 
 
<p>Q:</p>
</td><td> 
 
<p>Yes, you do not &#8211;</p></td></tr><tr><td> 
 
<p>A:</p>
</td><td> 
 
<p>If I needed $5million, $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million </p></td></tr><tr><td> 
 
<p>Q:</p>
</td><td> 
 
<p>Yes. You did not need the 6&nbsp;million, you only needed 5&nbsp;million, but you did need the key money, did you not?</p></td></tr></tr></tbody></table>
 
 
 
 
 
 
 
 
 
<table class="KenTable"><colgroup><col width="9%"><col width="88%"></colgroup><tbody><tr><td> 
 
<p>Q:</p>
</td><td> 
 
<p>$5million </p></td></tr><tr><td> 
 
<p>A:</p>
</td><td> 
 
<p>Why borrow money if you do not need it?</p></td></tr><tr><td> 
 
<p>Q:</p>
</td><td> 
 
<p>Yes, you do not &#8211;</p></td></tr><tr><td> 
 
<p>A:</p>
</td><td> 
 
<p>If I needed</p></td></tr><tr><td> 
 
<p>Q:</p>
</td><td> 
 
<p>Yes. You did not need the 6&nbsp;million, you only needed 5&nbsp;million, but you did need the key money, did you not?</p></td></tr></tr></tbody></table>
 
 </BODY>
</HTML>

Open in new window

0
 
Eric BourlandCommented:
I noticed the markup did not show up clearly in the entry, above. I cleaned it up and give it to you again, in a more readable fashion:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  
  
  
  
  
<style type="text/css">
/*style the table */
 
.KenTable {
margin:2%;
border-collapse:collapse; 
} 
 
 
/*style the td */
.KenTable td {
text-align: justify;
font:12pt Times New Roman;
border:1px solid #000;
text-align:left;
	} 
</style>
                                
                                
                                
                                
 </HEAD>
 
 <BODY>
<a id="p1_138"></a>
 
 
 
 
<p>My first Para</p>
 
 
 
<table class="KenTable">
 
<!-- Use colgroup attribute to set column widths -->
 
<colgroup><col width="9%"><col width="88%"></colgroup>
 
<tbody><tr><td> 
 
<p>Q:</p>
</td><td> 
 
<p>$5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million </p></td></tr><tr><td> 
 
<p>A:</p>
</td><td> 
 
<p>Why borrow money if you do not need it?</p></td></tr><tr><td> 
 
<p>Q:</p>
</td><td> 
 
<p>Yes, you do not &#8211;</p></td></tr><tr><td> 
 
<p>A:</p>
</td><td> 
 
<p>If I needed $5million, $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million $5million </p></td></tr><tr><td> 
 
<p>Q:</p>
</td><td> 
 
<p>Yes. You did not need the 6&nbsp;million, you only needed 5&nbsp;million, but you did need the key money, did you not?</p></td></tr></tr></tbody></table>
 
 
 
<table class="KenTable"><colgroup><col width="9%"><col width="88%"></colgroup><tbody><tr><td> 
 
<p>Q:</p>
</td><td> 
 
<p>$5million </p></td></tr><tr><td> 
 
<p>A:</p>
</td><td> 
 
<p>Why borrow money if you do not need it?</p></td></tr><tr><td> 
 
<p>Q:</p>
</td><td> 
 
<p>Yes, you do not &#8211;</p></td></tr><tr><td> 
 
<p>A:</p>
</td><td> 
 
<p>If I needed</p></td></tr><tr><td> 
 
<p>Q:</p>
</td><td> 
 
<p>Yes. You did not need the 6&nbsp;million, you only needed 5&nbsp;million, but you did need the key money, did you not?</p></td></tr></tr></tbody></table>
 
 </BODY>
</HTML>

Open in new window

0
 
KenTan85Author Commented:
Eric, your coding made mi realised that setting margin in table will help solve the problem, thankx !
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now