How To Get A Table To Be Fluid Up To A Max Width - WebmasterWorld
Có thể bạn quan tâm
Toggle navigation 
I've got a three-column, single line table. I want the middle cell fixed at 700px. That's the easy part. If the window is wider than 700px, then I want to show the left and right cells, in equal amounts, up to 250px for each cell. So if the window is wider than 1200px, then the columns are 250px, 700px, and 250px. Is this possible without JavaScript? With JS I can find out the window width and then set the size of each cell directly. Without JS, I'm lost. If your table is only a single row, which not just use 3 divs? Then it will be easy to produce what you want to see. I'd rather not try to justify why I prefer tables, especially as no matter what I say those reasons will invariably be dismissed as insufficient. I would just really prefer to do this with Tables. However, if nobody knows how to do this with Tables, then I'll entertain a DIV-based solution, since I don't know how to do it with DIVs either. hi! it would be easy with div's. first put them in a wrapper, then create 3 (e.i.<div class="name">) and divide the width of the wrapper in 3. hope this helps! give me a heads up if you didn't get it. I certainly know how to put three DIV's inside another DIV, but I still don't have a clue as to how to get the exact behavior I described in the original post. as long as the three div's are inside the wrapper, there shouldn't be a problem. you just need to declare the width of wrapper as 960px. it's safer in terms of different screen size. I've been trying to come up with a solution to this, but I can't see one. All the times I've coded fluid layouts in the past, everything across the page horizontally has a percentage width - padding, margins, widths. As soon as you stick things with a static width in there, the calculations of what a percentage width of the page is change when the window is resized and the combined width of elements no longer adds up = you get floats dropping. here it is: body{ width:100%; margin:0;padding:0; } #wrapper{ width:960px; } #div1{ width:300px; float:left; } #div2{ width:300px; margin-left:300px; } #div3{ width:300px; float:right; margin-right:40px; } <!--try to arrange the div margin and padding. remember the 960px width of wrapper.--> <div id="wrapper"> <div id="div1"> </div> <div id="div2"> </div> <div id="div3"> </div> </div> Sanji41, that's a fully static width layout, it doesn't really help the OP who is asking for help on making a fluid layout. MichaelBlueJay, I don't know if you would have any luck with this - I've been meaning to look into this (CSS3 table displays) for a while: [webdevelopmentbits.com...] It's not that well supported yet but there's likely to be a JS file somewhere to reproduce it in older browsers. This was the closest I could get to what you want, it allows a few pixels of resizing in exactly the way you want before the floats drop - maybe someone else can think of a way it could be worked around or improved. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- div#container { margin:0 auto; } div.column { outline:1px solid #000; height:600px; } div#middle { width:700px; background:#ccc; float:left; } div#left { float:left; width:20%; max-width:250px; background:#f00; } div#right { float:left; width:20%; max-width:250px; background:#00f; } --> </style> </head> <body> <div id="container"> <div class="column" id="left"> <div class="inner"> content </div> </div> <div class="column" id="middle"> <div class="inner"> content </div> </div> <div class="column" id="right"> <div class="inner"> content </div> </div> </div> </body> </html> its a basic layout, you need some jquery to know the window size and run the following code.. saw this a couple of days ago, try to look for it. Well, I don't feel so bad now that I can't figure this out myself. Maybe there's no solution besides using JavaScript. If so, in my opinion this is a big shortcoming of HTML and CSS. It ought to be possible with both, but it doesn't look like it's possible with *either*. Yeah, I think it's one for JavaScript, and I agree it's an annoying limitation. I'm still not fully convinced there's no way to do it though but maybe that's wishful thinking. Especially frustrating because the code I posted does almost exactly what you want, only a few % more of allowable resize before the float drop and you could lock it down with a min-width at the narrower width. Whoops double post very quick, but I think meets remit, at least in FF & IE theory is to give the table a width to center it - 99% will do (this will only work if 99% of the screen resolution is equal or greater than 700px) - so presuming larger than 700px resolutions - then constrain the table with a max-width (1200px in your case) and a min width (700px) to meet the middle column width requirements.. then actually give the middle column (via <col> tag style or class) a 700px width.. You could put it on the td itself I presume but with the "auto" table layout format which this relies on, I think the cols width would be more stable, if the parser has to go over the cells to get the width it's likely to give the first column a min width depending on content - then 700px for the second col, then whatever is left over for the width of the third column? anyway this is thoroughly untested and could probably done with divs (think Inline blocks would do it?) try this.. does it fit with what might or might not be in the two side columns? (my widths are slightly different from what yours would be I wanted a more obvious test!) Thanks, SuzyUK! This *almost* works -- Safari doesn't respect max-width for tables, and it doesn't center in Safari either. But Safari does respect max-width for DIVs, so I just wrapped the table in a DIV. And I used antique <center> tags to center the whole thing. I know, they're deprecated, but they have the advantage of actually getting the job done. Below is my code. I forgot to mention, the outer cells have no content, just background images. So I don't have to worry about the browser enlarging those cells in order to fit the content.
- Dashboard
- Dashboard Tracker
- Add / Edit My Forums
- System Announcements
- Discussion
- Active Thread Feed
- Top Threads Today
- Top Threads This Week
- Top Threads Library
-
- Go!
-
- View All
-
- View All
-
- Login
- Logout
- Home
- Forums Index
- Browser Side / CSS 9:18 am Dec 21, 2024
Forum Moderators: not2easy
Message Too Old, No RepliesHow to get a table to be fluid up to a max width,
with the outer cells fluid and the inner cell fixed?
MichaelBluejay
Msg#:4214908 11:50 pm on Oct 10, 2010 (gmt 0) I've got a three-column, single line table. I want the middle cell fixed at 700px. That's the easy part. If the window is wider than 700px, then I want to show the left and right cells, in equal amounts, up to 250px for each cell. So if the window is wider than 1200px, then the columns are 250px, 700px, and 250px. Is this possible without JavaScript? With JS I can find out the window width and then set the size of each cell directly. Without JS, I'm lost. milosevic
Msg#:4215048 9:31 am on Oct 11, 2010 (gmt 0) If your table is only a single row, which not just use 3 divs? Then it will be easy to produce what you want to see. MichaelBluejay
Msg#:4216025 5:52 am on Oct 13, 2010 (gmt 0) I'd rather not try to justify why I prefer tables, especially as no matter what I say those reasons will invariably be dismissed as insufficient. I would just really prefer to do this with Tables. However, if nobody knows how to do this with Tables, then I'll entertain a DIV-based solution, since I don't know how to do it with DIVs either. sanji41
Msg#:4216038 7:09 am on Oct 13, 2010 (gmt 0) hi! it would be easy with div's. first put them in a wrapper, then create 3 (e.i.<div class="name">) and divide the width of the wrapper in 3. hope this helps! give me a heads up if you didn't get it. MichaelBluejay
Msg#:4216064 8:29 am on Oct 13, 2010 (gmt 0) I certainly know how to put three DIV's inside another DIV, but I still don't have a clue as to how to get the exact behavior I described in the original post. sanji41
Msg#:4216092 9:34 am on Oct 13, 2010 (gmt 0) as long as the three div's are inside the wrapper, there shouldn't be a problem. you just need to declare the width of wrapper as 960px. it's safer in terms of different screen size. milosevic
Msg#:4216098 10:06 am on Oct 13, 2010 (gmt 0) I've been trying to come up with a solution to this, but I can't see one. All the times I've coded fluid layouts in the past, everything across the page horizontally has a percentage width - padding, margins, widths. As soon as you stick things with a static width in there, the calculations of what a percentage width of the page is change when the window is resized and the combined width of elements no longer adds up = you get floats dropping. sanji41
Msg#:4216106 10:22 am on Oct 13, 2010 (gmt 0) here it is: body{ width:100%; margin:0;padding:0; } #wrapper{ width:960px; } #div1{ width:300px; float:left; } #div2{ width:300px; margin-left:300px; } #div3{ width:300px; float:right; margin-right:40px; } <!--try to arrange the div margin and padding. remember the 960px width of wrapper.--> <div id="wrapper"> <div id="div1"> </div> <div id="div2"> </div> <div id="div3"> </div> </div> milosevic
Msg#:4216107 10:35 am on Oct 13, 2010 (gmt 0) Sanji41, that's a fully static width layout, it doesn't really help the OP who is asking for help on making a fluid layout. MichaelBlueJay, I don't know if you would have any luck with this - I've been meaning to look into this (CSS3 table displays) for a while: [webdevelopmentbits.com...] It's not that well supported yet but there's likely to be a JS file somewhere to reproduce it in older browsers. This was the closest I could get to what you want, it allows a few pixels of resizing in exactly the way you want before the floats drop - maybe someone else can think of a way it could be worked around or improved. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- div#container { margin:0 auto; } div.column { outline:1px solid #000; height:600px; } div#middle { width:700px; background:#ccc; float:left; } div#left { float:left; width:20%; max-width:250px; background:#f00; } div#right { float:left; width:20%; max-width:250px; background:#00f; } --> </style> </head> <body> <div id="container"> <div class="column" id="left"> <div class="inner"> content </div> </div> <div class="column" id="middle"> <div class="inner"> content </div> </div> <div class="column" id="right"> <div class="inner"> content </div> </div> </div> </body> </html> sanji41
Msg#:4216119 11:00 am on Oct 13, 2010 (gmt 0) its a basic layout, you need some jquery to know the window size and run the following code.. saw this a couple of days ago, try to look for it. MichaelBluejay
Msg#:4216991 1:59 am on Oct 15, 2010 (gmt 0) Well, I don't feel so bad now that I can't figure this out myself. Maybe there's no solution besides using JavaScript. If so, in my opinion this is a big shortcoming of HTML and CSS. It ought to be possible with both, but it doesn't look like it's possible with *either*. milosevic
Msg#:4217061 8:42 am on Oct 15, 2010 (gmt 0) Yeah, I think it's one for JavaScript, and I agree it's an annoying limitation. I'm still not fully convinced there's no way to do it though but maybe that's wishful thinking. Especially frustrating because the code I posted does almost exactly what you want, only a few % more of allowable resize before the float drop and you could lock it down with a min-width at the narrower width. milosevic
Msg#:4217062 8:43 am on Oct 15, 2010 (gmt 0) Whoops double post SuzyUK
Msg#:4219000 9:04 pm on Oct 19, 2010 (gmt 0) very quick, but I think meets remit, at least in FF & IE theory is to give the table a width to center it - 99% will do (this will only work if 99% of the screen resolution is equal or greater than 700px) - so presuming larger than 700px resolutions - then constrain the table with a max-width (1200px in your case) and a min width (700px) to meet the middle column width requirements.. then actually give the middle column (via <col> tag style or class) a 700px width.. You could put it on the td itself I presume but with the "auto" table layout format which this relies on, I think the cols width would be more stable, if the parser has to go over the cells to get the width it's likely to give the first column a min width depending on content - then 700px for the second col, then whatever is left over for the width of the third column? anyway this is thoroughly untested and could probably done with divs (think Inline blocks would do it?) try this.. does it fit with what might or might not be in the two side columns? (my widths are slightly different from what yours would be I wanted a more obvious test!) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Page Title </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <style type="text/css" media="screen"> body {text-align: center; /* might be needed to center the whole table for old IEs */} table { width: 99%; margin: 0 auto; max-width: 1000px; /* 1200 for you */ min-width: 700px; /*text-align: left; the contra for the old IE centering trick if you actually want the text aligned left of cells */ border-collapse: collapse; } table td {border: 1px solid #777;} table .mid {width: 700px;} </style> </head> <body> <table summary="" cellspacing="0"> <colgroup> <col span="1" class="side"> <col span="1" class="mid"> <col span="1" class="side"> </colgroup> <tr> <td>1</td> <td>700px fixed</td> <td>1</td> </tr> </table> </body> </html>
MichaelBluejay
Msg#:4219494 10:05 pm on Oct 20, 2010 (gmt 0) Thanks, SuzyUK! This *almost* works -- Safari doesn't respect max-width for tables, and it doesn't center in Safari either. But Safari does respect max-width for DIVs, so I just wrapped the table in a DIV. And I used antique <center> tags to center the whole thing. I know, they're deprecated, but they have the advantage of actually getting the job done. Below is my code. I forgot to mention, the outer cells have no content, just background images. So I don't have to worry about the browser enlarging those cells in order to fit the content. <style type="text/css" media="screen"> table { width: 99%; max-width: 1200px; min-width: 700px; border-collapse: collapse; } table td {border: 1px solid #777;} table .mid {width: 700px;} </style> </head> <body> <center> <div style="max-width:1200px"> <table cellspacing="0"> <colgroup> <col span="1" class="side"> <col span="1" class="mid"> <col span="1" class="side"> </colgroup> <tr> <td background="images/spideyoncan.gif"></td> <td>700px fixed</td> <td background="images/spideyoncan.gif"></td> </tr> </table> </div> </center>
Join The Conversation
- Register For Free! - Become a Pro Member!
- See forum categories - Enter the Forum
Moderators and Top Contributors
- Moderator List | Top Contributors:This Week, This Month, Nov, Oct, Archive, Top 100 All Time, Top Voted Members
Hot Threads This Week
- December 2024 Google Search Observations
- November 2024 Google Search Observations
- AdSense Earnings and Observations - December 2024
- ChatGPT - to block or not to block? That is the question.
- AdSense Earnings and Observations - November 2024
- Organic traffic continuously decreasing since 11 Nov 2024
- OpenAI's $200 Monthly ChatGPT Pro Subscription announced
- Is guest posting still relevant to E-Commerce SEO in 2024?
- Rumours of OpenAI browser in wake of Chrome monopoly issues
- What happened in March / April 2024
- Home
- Forums Index
- Browser Side / CSS 9:18 am Dec 21, 2024
Từ khóa » Html Colgroup Max Width
-
Table
Min-max-width Ignored - Stack Overflow -
: The Table Column Group Element - MDN Web Docs -
HTML : Table Colgroup Min-max-width Ignored - YouTube
-
HTML DOM Style MaxWidth Property - W3Schools
-
Fixed Layout Table Ignores Min-width Of Cells - HTML & CSS - SitePoint
-
Not Able To Set Width Using ColGroup When Table-layout Is Fixed
-
Grid System - Bootstrap
-
Chapter 3. How To Specify Tables And Columns Width
-
How To Code Outlook-Proof Emails - Chuk Moran - Medium
-
Tables In HTML Documents
-
17 Tables - W3C
-
[Table] Table Width Render Different Under Chrome 90 And Chrome 91
Copyright © 2022 | Thiết Kế Truyền Hình Cáp Sông Thu