?
Solved

Table max width in CSS

Posted on 2009-02-17
14
Medium Priority
?
1,066 Views
Last Modified: 2013-12-08
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
Comment
Question by:KenTan85
  • 8
  • 6
14 Comments
 
LVL 3

Expert Comment

by:Eric Bourland
ID: 23666690
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
 

Author Comment

by:KenTan85
ID: 23666709
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
 
LVL 3

Expert Comment

by:Eric Bourland
ID: 23666790
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:KenTan85
ID: 23666811
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
 
LVL 3

Expert Comment

by:Eric Bourland
ID: 23666844
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
 

Author Comment

by:KenTan85
ID: 23666882
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
 
LVL 3

Expert Comment

by:Eric Bourland
ID: 23666922
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
 

Author Comment

by:KenTan85
ID: 23666950
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
 
LVL 3

Expert Comment

by:Eric Bourland
ID: 23667201
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
 

Author Comment

by:KenTan85
ID: 23667481
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
 
LVL 3

Expert Comment

by:Eric Bourland
ID: 23669841
Ken, I'm taking a look at this now. More soon.

Eric
0
 
LVL 3

Expert Comment

by:Eric Bourland
ID: 23670198
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
 
LVL 3

Accepted Solution

by:
Eric Bourland earned 2000 total points
ID: 23670220
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
 

Author Comment

by:KenTan85
ID: 23670889
Eric, your coding made mi realised that setting margin in table will help solve the problem, thankx !
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
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?
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month16 days, 14 hours left to enroll

862 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