HTML - Table- Thead Fixed With Tbody Scrolled
Hi,
i'm doing an interface for a database, and i want to print my query results on tables. As i have many entries, i need a big table so i want to do a table with scroll where my header doesn't get out of sight (ever) when i scroll down. im working on NuSphere Phped, Windows 7. This code is working only on the PHPed simulator...on chrome and FF the scrollbar dont appear: PHP Code: <table align="center" cellpadding="3" cellspacing="0" style="border: black; border-style:double ; border-spacing: 0; cursor:default;"> <thead> <?php ###### ###### processing the query for($i=0; $i<$numcol; $i++) { ####### echo "<th bgcolor=\"#000000\" "; ####### some conditions for mouse events echo "><font face=\"helvetica, cursive\" size=\"-2\" color=\"white\">"; echo $column_name"</font></th>"; } ?> <th style="width: 16px; background: black;"></th> ##16px for the scrollbar </thead> <tbody style="overflow-y: scroll;overflow-x:hidden; height: 300;"> <?php $i=0; do{ ######## ######## ?> <tr onmouseover="this.bgColor='#B3BC7A'" onMouseout="this.bgColor='<?php if($i%2==0) echo "#eeeeee"; else echo "#ffffff"; ?>'" <?php if($i%2==0) echo " bgcolor=\"#eeeeee\" "; else echo " bgcolor=\"#ffffff\""; ?>> <?php for($j=0; $j<$numcol; $j++) { ?> <td <?php #######more php query precessing ########## ?> ><font face="helvetica, cursive" size="-2"> <?php } echo $attribute; ?> </td> <?php } ?> </font> <td style="width: 16px; overflow: scroll;"></td></tr> <?php $i++; }while($currentRow) ?> </tbody> </table> can someone tell me how to make it work on those browsers? Similar TutorialsBasically what I want is a floating table head that follows you around when you scroll the table. Did all that, but the problem is that you need to cut out the head of the table to make it float. The problem comes where you have a table that has no column width set so the column width is determined by the content of tbody. I'm trying to make the browsers keep rendering the entire table, but hide the tbody so the columns won't loose their widths. It works fine in Mozilla and Opera, but IE has problems. Here is the code: HTML Code: <html> <head> <style type="text/css"> table { border-collapse: collapse; } tbody td { line-height: 0px; visibility: hidden; } </style> </head> <body> <table id="table_test" border="0" cellpadding="0" cellspacing="0" style="background-color: red;"> <thead> <tr> <th>column1</th> <th>column2</th> <th>column3</th> <th>column4</th> <th>column5</th> <th>column6</th> <th>column7</th> </tr> </thead> <tbody> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>jaz sem pa daljsi tekst jaz sem pa daljsi tekst jaz sem pa daljsi tekst</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> <tr> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>nekaj</td> <td>pac</td> <td>mora</td> <td>mora</td> </tr> </tbody> </table> </body> </html> And the result can be seen in the attached picture. Any ideas how to solve this or another way to preserve the thead column widths? Any idea how this could happen? http://frostyle.servehttp.com/temp/shuttle_manage.jpg There isn't much CSS applied to the table or the thead, and this only sometimes seems to happen. Not sure if this is Firefox only or not. Any ideas? Thanks. I've created a table using xhtml similar to the following: <table> <caption></catpion> <thead></thead> <tbody></tbody> <tfoot></tfoot> </table> For some reason, when I set the caption height > 30px the caption section starts repeating itself but not with the caption text. Here's a pic: http://instagr.am/p/IM55OpPYn5/ I get this behavior in both IE and FF. Is this the expected behavior? Is there a workaround for this? It seems like xhtml would provide more flexibility than this.... Hi all, i have table with 3 columns, this is the code: <body> <center><table frame="vsides" cellspacing="0" border="2" width="1000" cellpadding="10" > <tr> <td bgcolor="white" width="200" valign="top"> <br><br>This is some text. </td> <td bgcolor="white" width="600" valign="top"><br> This is some text. </td> <td bgcolor="white" width="200" valign="top"> <br> This is some text. </td> </tr> </table></center> </body> but when i enter some more txt table expand, is it possible to create table that columns can expand(height) but rows not(width)? thx Hi i have a table with a picture within its only cell . How can i lock the size of the table so that it wil not get any larger should a larger image be put in it? I have tried setting the width and height to a fixed value but that does not seem to do keep it fixed. Ideally i would like the image to resize itself to match the maximum values of the table but this i suppose will probably be a good bit harder? Look at this code <html> <body> <table> <tbody style="display: none;"> <tr> <td>Row 1 hasn't to be appeared</td> </tr> <tbody> <tr> <td>Row 2 hasn't to be appeared as well</td> </tr> </tbody> <tr> <td>Row 3 hasn't to be appeared as well</td> </tr> </tbody> </table> </body> </html> The result is: Row 2 hasn't to be appeared as well Row 3 hasn't to be appeared as well With Row 2 we can work through some "CSS/JavaScript/AJAX ... etc" stuff. But WHY DOES THE ROW 3 APPEARED ????????? I am having problems getting colgroup and parts of tbody to work properly. Colgroup just does not apply any background colour or alignment. Tbody groups the rows together but it only applies colour to behind the text in the cell and not the whole cell like I want it to. Also when I use text-align with it it only aligns th cells and not td. I am using Internet Explorer 7 and Dreamweaver CS3, I have also tried displaying it in Firefox but that does the same thing as IE. I have also tried the CSS equivalents of the HTML code but they do the same. Here is the code below it is just to show what it keeps doing: <table width="100%" cellpadding="0" cellspacing="0"> <caption> This is a test table </caption> <colgroup span="5" align="center" style="background-color:#CCFF00"/> <tr> <th>aaaaaaaaaaa</th> <th>bbbbbbbbbbb</th> <th>ccccccccccc</th> <th>ddddddddddd</th> <th>eeeeeeeeeee</th> </tr> <tbody style="background-color:#FFFF00"> <tr> <th>ww</th> <td>one</td> <td>two</td> <td>three</td> <td>four</td> </tr> <tr> <th>ww</th> <td>one</td> <td>two</td> <td>three</td> <td>four</td> </tr> </tbody> </table> Can anyone explain why its doing these things and if Im doing something wrong? Also is it wise to use colgroup and tbody nowadays or are there better alternatives? Hi, I'm a little new at this, and I'm trying to put a pretty simple website together. I have a table that is the basis for the whole website design. It's pretty fixed, so I want all the widths of the table to be constant. A couple rows have fixed heights for aesthetic purposes. A couple rows I want to expand to whatever height is necessary to accomodate the content inside. the fourth row of the table has three cells side by side that I use as the header design. 1) picture 2) space 3) title I want all these to have fixed widths and heights. underneath is a cell that spans the length of all three of those. This is where I want my content. 4) content The length of this stays fixed but the height changes as more content is addes. The trouble is, the table cells display correctly for me as long as there is limited amount of text inside the 4) content cell. Whenever I enter past a few sentences, the 1) picture cell starts taking up more of the width and shrinking the 3) title cell. And this really messes up the nice spacing I had. Any thoughts on why this would happen??? I'm just stuck. I've tried a million things, but I'm sure its something simple I can't see right now. Hopefully a pair of fresh (and knowledgeable) eyes can help! Thanks so much, heres my code: [font="Courier New"] <body> <table width="875" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="75" colspan="5"><img src="../images/RichfieldLogo.png" width="250" height="75"></td> </tr> <tr align="center"> <td height="25" colspan="5" valign="top" class="mainmenu" style="border-bottom: solid 1px #666666; border-top: solid 1px #666666"> <h1 class="menu"> <ul> <li><a href="#" class="mainmenu">Home</a></li> <li><a href="#" class="mainmenu">Party in the Park</a></li> <li><a href="#" class="mainmenu">Info</a></li> </ul> </h1></td> </tr> <tr> <td height="20" colspan="5"><img src="../images/20spacer.png" width="20" height="20"></td> </tr> <tr align="left" valign="top"> <td width="190" rowspan="2"> <img src="../images/PartynParkPlaceholder.png" width="190" height="385"></td> <td width="20" rowspan="2"><img src="../images/20spacer.png" width="20" height="20" border="0" align="top"></td> <!-- This is where the trouble starts! I can't get these cells to stay a fixed size!!! --> <td width="275" height="275"><img src="../images/SamplePicSmall1.png" width="275" height="275" border="0" align="right"></td> <td width="20" height="275"><img src="../images/20spacer.png" width="20" height="20"></td> <td width="370" height="275"> <p><font size="45px" face="Helvetica, Arial, sans-serif" weight="bold"><strong>Party <br /> in the Park</strong></font><br /> <h2 class="datetime"><font color="#666666">LOCATION </font> Richfield Park, 345 Main St in Richfield<br /> <font color="#666666">DATE </font>Saturday, October 13 2008 <br /> <font color="#666666">TIME</font> From 8am until late afternoon<br /> <font color="#666666">INFO</font> Call 704.463.1308</h2></p> </td> </tr> <!-- This seems to be the cause of it. If I have a couple sentences down here its fine, but more than a few words and it causes sheer html chaos above! --> <tr> <td colspan="3"><img src="../images/10spacer.png" width="10" height="10"><br /><hr width=100% size=1px color=#99CC33> <img src="../images/10spacer.png" width="10" heigh="10"><br /> <h2 class="text">Party in the Park is an annual Richfield tradition started in 199X to gather the town's residents and their friends together to enjoy good food, fun entertainment and each other's company. This year we'll have blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. The morning will end right with our famous Cush cookoff! Party in the Park is an annual Richfield tradition started in 199X to gather the town's residents and their friends together to enjoy good food, fun entertainment and each other's company. This year we'll have blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. The morning will end right with our famous Cush cookoff! </h2> <br /><img src="../images/25spacer.png"><br /> <p><h1 class="menu2">Features</h1></p> <p><h1 class="menu2">Photos</h1><hr width="100%" size="1px" color="#99CC33"></p> <p><h1 class="menu2">Flyer</h1></p> <p><h1 class="menu2">Directions</h1></p> </td> </tr> <!-- And everything from here on out seems to be fine from what I can tell --> <tr> <td height="75" colspan="5"> </td> </tr> <tr> <td colspan="5" valign="top"><hr width="100%" padding-bottom="1px"> <div align="right"><font color="#99CC33"><em><font color="#000000" size="-7" face="Verdana, Arial, Helvetica, sans-serif">email us at </font><font size="-7" face="Verdana, Arial, Helvetica, sans-serif">web@gorichfield.com</font></em></font></div></td> </tr> </table> </body> thanks again for any help guys! Hi there, I have a table layout on the main page of site I'm working on, and have one row with two cells. The cell on the left contains a php include page which auto updates with news, however, as the news gets longer and the cell container auto resizes to fit the height..it also messes with the height of the cell on the right, leaving empty spaces (the black space right under "recruitment status") I'm stumped as to how to deal with is, any suggestions are much appreciated. Thanks the site: http://guild-paragon.com/indexframe edit: decided to put an iframe in there to hold the height, there's prob better alternatives out there though Hi There, I have included my code below. The table looks correct in Firefox 2 and Safari 3 but not IE7. I am attempting to create a table that fills up the entire page with a fixed width row at the bottom. IE7 ignores the height I have set for the second row and makes both rows the same height. Note that the Doctype tag is important here, if I remove it then the page looks correct, however it is my intention to ensure the browser runs in standards mode. As far as I am aware my code is correct. Any help or advice would be appreciated. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> html,body{ margin:0; padding:0; height:100%; border:none; } </style> </head> <table height="100%" cellpadding="0" cellspacing="0" border="1" width="100%"> <tr> <td> Line 1 </td> </tr> <tr style="height:10px;"> <td> Line 2 </td> </tr> </table> </html> Hi, I have the following problem i'm trying to solve with HTML: I have a simple table with 3 columns. I want the table to have a 100% width of the screen. Furthermore the center column must ALWAYS have a width of 1000. The left and right column should just be there too fill the gaps up if you have a wider screen than 1000. Setting these left/right columns to width "100%" doesn't work because than it would just make the left column fill up the space and the right column will have a width of 0. How can I solve this? Some example could would be highly appreciated Thanks, betonboor I have a very simple table that I cannot simply get to render correctly across IE, Firefox, and Opera. At first, I was using CSS to define the cell widths/heights - when that was giving me issues I got rid of all the CSS and attempted to use plain HTML. The problem persisted. Here's the code - it doesn't get much simpler than this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1"> <tr> <td width="15" height="33">a</td> <td>b</td> <td>c</td> <td width="15" height="33">d</td> </tr> <tr> <td colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Appearance in Opera Appearance in IE7 Appearance in Firefox (this is what I want it to look like in all browsers) I haven't done HTML seriously in 7-8 years or so but I don't really remember having these problems with IE/Netscape. The fix I found for IE was to use style="table-layout: fixed" for the table: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed"> <tr> <td width="15" height="33">a</td> <td>b</td> <td>c</td> <td width="15" height="33">d</td> </tr> <tr> <td colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Now IE works fine, Firefox didn't break, but Opera's cells still are not 15 pixels. IE7 Appearance fixed Here's my attempt at getting Opera to display it properly by mixing CSS and HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed"> <tr> <td style="width: 15px; height: 33px" width="15" height="33">a</td> <td style="height: 33px">b</td> <td style="height: 33px">c</td> <td style="width: 15px; height: 33px" width="15" height="33">d</td> </tr> <tr> <td style="width: 100%" width="100%" colspan="4" rowspan="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </table> </BODY> </HTML> Opera looks even worse now This seems like such a simple table. I really don't understand why I'm having such a hard time. I believe the second row - using colspan is causing the issue. Please don't answer with - "dont use tables" or something silly like that Thank you -TableTrTd can i have fixed layout for only some part of a table? I want the first column of my table to be "auto" and the other columns to be "fixed" llike style='table-layout:fixed;'. How can I achieve this? Thanks! Is it possible to start a page scrolled down a certain amount automatically? Not through a link, just so that whenever someone visits the site, it is scrolled down that default amount? Thanks! Hello, I am loading a webpage with an embedded youtube video (and paragraphs of text data) into an iframe window. This works fine, but when I scroll the iframe window (up/down), the youtube video doesn't scroll with it. It distorts. To be clear, I have two browsers, Mozilla Firebird, and IE6, and in Firebird it works fine, IE6 is where I have the trouble. Here is the code. Here is the css part of the loaded page: Code: <STYLE TYPE="text/css"> <!-- #video { position: absolute; margin-top: 200px; margin-left: 20px; } --> </STYLE> here is the embedded video of the loaded page Code: <div id="video"> <object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/Yi-wNLT3HjA"> </param> <embed src="http://www.youtube.com/v/Yi-wNLT3HjA" type="application/x-shockwave-flash" width="425" height="350"> </embed> </object> </div> Okay, now here is the iframe code, the window into which the video is loaded The css part Code: <STYLE TYPE="text/css"> <!-- #datawindow { position: absolute; filter:alpha(opacity=80); width: 210px; height: 600px; margin: 0; margin-top: 180px; margin-left: 180px; font-weight: normal; } --> </STYLE> The code in the body: Code: <div id="datawindow"> <iframe name="stuff" id="framewindow" src="home.html" frameborder="0" scrolling="auto" width=500 height=510 marginwidth=5 marginheight=5 scrolling="auto"></iframe> </div> Does anyone have any idea what I'm doing wrong, why the video isn't properly scrolling in the iframe window? Thanks for any feedback! hi guys im after a simple code so that the background on my forum is fixed and only the foreground moves up and down, someone must know iv looked all over the place and cant find how anywhere,someone help please Cheers Jacob I have a control on a pop up that i cant seem to get rid of the scroll bars....How do you create a pop up window with no scroll bars I want it to use the scroll bars on the control instead....any help with this issue?? Hello. I need some assistance in figure out how to make a fixed/linkable/image. I used this code here
HTML Code: <body style="background-attachment: fixed; background-repeat: no-repeat;" background="XXX.jpg"> which worked great in keeping its place. Then I added HTML Code: <a href="http://www.davesite.com/"> before and after but no luck. Im trying to get that link to work for the background too, but its not working out at all. "Sadly no HTML skills whatsoever" Hi everyone!! I have a div box that has a fixed position so it is always there when you scroll down a page.... but as I have a long footer, the fixed div box goes over the footer when I scroll to the bottom of the page what is the best way to scroll a div box within another div box, so the div box is visible and scrolls with the page up to where the footer div starts? hope that makes sense? many thanks for you're help. |