HTML - Why My Table Not 100% Width Even Tho Is Specified...?
Please check my new website at http://www.lombrozo.co.uk
the main part of each page is a table with width set to 100%, but as you can see, it doesn't quite fill the width of the browser, you can see this by the thick grey line on the right side... Any ideas? any help much appreciated. Thanks, Simon. Similar TutorialsHi, I'm having an issue with a table that I could use some help with. Code: <table width="10"> <tr> <td width="10">ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()_+/*-+</td> </tr> </table> As you can see, the letters contained in the <td> when printed are much wider than 10px, but because there are no spaces between the text, it stretches past 10px. I'm trying to find a way so that even though there are no spaces dividing the text, the text still stays within 10px width and doesn't stretch the table. I've tried fixed width and max-width, neither worked. Any suggestions? Hi all, I want my table to have 100% of the screen width. But when the text inside is to big, the table is wider than the screen. My table info is: <table border='1' bordercolor='darkgrey' width='100%' cellpadding='3' cellspacing='0'> I also want, that all 8 columns have the same width according to 100% from the table. What can I do? Mfg, DerTobi Hi, ive been trying to solve the image in the table but couldnt get it right.. I need help from you guys.. kindly see the attached image for the error: and this is the HTML code HTML Code: <table cellpadding="0" cellspacing="0" border="0" width="600px" bgcolor="#FFFFFF"> <tr> <td width="34"> <img src="{/document/config/static-image-url}3_1_3.gif" alt="" border="0" width="34" height="116" /> </td> <td> <table cellpadding="0" cellspacing="0" border="0" width="268" bgcolor="#FFFFFF" height="116"> <tr> <td align="left" width="268" bgcolor="#FFFFFF"> <span class="price1" style="color:#000000;font-size:12px;font-family:Arial;font-weight:bold"> <xsl:call-template name="fixLines"> <xsl:with-param name="inText" select="/document/page/field-set/field[tagname = 'text_15']/value" /> </xsl:call-template> </span> </td> </tr> <tr> <td align="left" width="268" bgcolor="#FFFFFF"> <span class="price1" style="color:#000000;font-size:12px;font-family:Arial"> <xsl:call-template name="fixLines"> <xsl:with-param name="inText" select="/document/page/field-set/field[tagname = 'text_16']/value" /> </xsl:call-template> </span> </td> </tr> </table> </td> <!-- the error image which needs to be aligned--> <td> <img src="{/document/config/static-image-url}3_1_5.gif" alt="" border="0" width="61" height="116" /> </td> <!--END OF the error image which needs to be aligned--> <td align="left" width="290" bgcolor="#FFFFFF" valign="top"> <span class="price1" style="color:#000000;font-size:12px;font-family:Arial;font-weight:bold"> <xsl:call-template name="fixLines"> <xsl:with-param name="inText" select="/document/page/field-set/field[tagname = 'text_17']/value" /> </xsl:call-template> </span> </td> <td> <img src="{/document/config/static-image-url}3_0.gif" alt="" border="0" width="100" height="116" /> </td> <td> <img src="{/document/config/static-image-url}3_1_4.gif" alt="" border="0" width="32" height="116" /> </td> </tr> </table> Hope to get a response asap.. thank you guys, Regards, Ed Here is my current code: <TABLE width="215" border="0" cellspacing="0" cellpadding="0"> <tr> <td><TABLE width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> VARIABLE TEXT </td> <td align="left"> IMAGE </td> </tr> </TABLE></td> </tr> <tr> <td> random text that is lengthy </td> </tr> </TABLE> My problem is that I want the image to be displayed right next to the variable text . but since the variable can be any length, it is not getting displayed right next to the image. It is turning out to have a large gap in between the variable and the image. The variable can be any length... it could be "hi" or "hellooooooooo" but the image still needs to be displayed exactly to the right of it. How can I fix this? Hello all! I wanted to ask if there is a way to specify certain width sizes for table cells in a table. The thing is that I have a table in one webpage that, if I leave the width of the TD cells unspecified, I usually end up with some cells being very wide because the text that is written inside them is very big and does not roll up automatically and other cells shrink and become very small in order for the total table not to lose its specified length. Can I set a specific width for the cell that gets filled with many words so that the contents of this cell will wrap and not extend so much? Thank you! I'm trying to have a preformatted section of text adhere to specific width attributes. My research has already led me to realizing that the "width" attribute in the <pre> tag has since been outdated and browsers will not recognize it anymore. So my next step is to put it within a table...but I can't get the <pre> block of text to adhere to the table dimensions either. Am I missing something simple? There has to be a way to keep the spaces and line breaks in a block of text but keep it confined to a certain area. Here is the relevant section of my code Code: <TABLE WIDTH=200> <TR> <TD ALIGN=CENTER> <H3><B><FONT color=#cc0000 face=arial> TECH NOTES:</FONT></B></H3></TD> </TR> <TR> <TD> <PRE><%=sBloody long winded text block%></PRE></TD> </TR> </TABLE> I guess I should also note that this table is inside of numerous other tables...some of which have width attributes and some of which don't. I didn't think that would affect the outcome but I may be wrong ok, im trying to make a shoutbox and i need the box to be a max width of 200px. But, since the shoutbox entries are going to be dynamic, theres a problem. In a table cell, if you have a string of characters without spaces, it will extend the width of the table cell (and entire table if appropriate) in order to accomodate this... The problem is, i need the table width to stay constant... 200px. Ive tried using normal width attributes and css in each of the td, table, and div (around the table) tags, but that does not work-- the table still extends horizontally in order to display the string. Is there anyway I can staticly set the table width to 200px and keep it that way? Frankly, i dont care what happens to the extra long string, short of deleting it altogether, i just need the table to stay a constant width I'm trying to make css style table border width thickness. My coding is <tr> <td height="10" style="white-space: nowrap; border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: .9pt solid brown; padding: 0px"></td> </tr> When i run in html file, it'ok and it's work fine. But when i put this code in php file, it doesn't work. Is there any special coding do i need to modify for php file type? Please share with me if anyone has an idea or experience. Thanks in advance. Im trying to creat a border above and beyond a word using inline css but want it go along the length of the whole width of the table. the table width is 500px. example I want this heading to have a bottom border go right across the width not just under it. <p><span style="font-size:12px;font-family:verdana;line-height:150%;border-bottom: 1px solid #EAEADA; font-weight:bold;color:#24561e;">HEADING1</span></p> I dont want to add a style sheet. The above code Shows up as HEADING Hello, I am having trouble converting the following example table into a nice tableless layout: Code: <table width="100%" cellspacing="0" cellpadding="0"> <tr> <td><img src="./left_image.gif" border="0" /></td> <td style="background: url(./bg_image.gif) top left repeat-x;" width="100%">Content</td> <td><img src="./right_image.gif" border="0" /></td> </tr> </table> The main problem is that center 100% width cell. A 100% width div with a div either side doesn't work... Any ideas on how I would go about this? My previous post meantioned that I have made an advert using HTML in a page using a table and I'm using an IFrame to embed this into my main pages where needed. I've hit a real problem this time. The table I've made seems to set its own minimum width for cells. As a result this causes the end cell to slightly spill off the edge of my pages. I have manually changed everything I can possibly think of, and nothing seems to work. In what instance would a table do this? The table is in a form. Inside the table in each cell I have 1 line of text, followed by a input box directly underneath, followed by another input box directly underneith, followed by a text hyperlink directly underneath that. I have the html in the text file attached if you want to have a little nosy (the javascript file referenced is to periodically change the text of the second box in each cell). Any ideas would be much appreciated. I've spent far too much time on this advert than I would have liked... Regards http://pizzarific.net84.net/ - please visit my website that i am developing for our php website. i have not yet embedded any php scripts there. please try to view the "pizza and food" both in firefox and IE7. how can resolve IE weird table width. Please help me. if you want i can give you my website files. thank you very much This may seem like a silly design question, I just CANNOT figure this out. this site, www.chrisdelia.com is made up of tables that are 100% table width. I want to replace the green area with an image that is 300x300 px and have the gray area go 100% across, but i just cannot seem to figure it out. inside the gray area also is an iFrame on each page, where the content goes, always. am i an idiot for overlooking the easiest thing ever? Hi all, I am a totally new to html, "yesterday I could not even spell it". I am working on a simple project where I have used a table to store page information (text and pictures), I read it somewhere it is the best way to do it. I figured out how to set the context width in the cell (<td width="20">) but how do set the width of the cell? Remember, I am not building "The Windsor Castle" just a little cuby house in the back so everything should be as simple aspossble, not necessarily the fastets and most versatile. Thanks in advance. I want to control the columns inside my table. link below show 3 inter columns, but the only way I can get the first column to be a one line test is for me to put breaks -BR- after every few words. this can't be right, how do I control the width of the columms? TIA http://www.nomagicneon.com/shorteez.html HI, Code: <html> <body> <table> <tr><td id="td"> <label id="la">HI</label> </td></tr> </table> <script> document.onload=f(); function f(){ alert(document.getElementById("td").width); } </script> </body> </html> in the above code i am not setting any style to TD element or LABEL element , but after the document loaded i need to get the width of either TD or LABEL element. is there any possibility to achieve that? help is highly anticipated Thanks R The following piece of code delivers a table with fixed width 666px and appr. 200px 466px wide columns, when opened within IE. Long text fits into the columns, long strings break at the border. When opening up within MS Word, the column width seem to ignore the styles. Does anybody know alternative commands delivering the same result in MS Word? Thanks, Andreas <table style="width: 666px; table-layout:fixed; word-wrap: break-word;" cellspacing="0"> <col width="30%"> <col width="70%"> <tr> <td>Floating Rate Payer Calculation Amount:</td> <td>|TRADE_CURRENCY| |CD_NOTIONAL|</td> </tr> </table> Hello Everyone! (hoping for quick reply.. lol) I am not sure if this should go here, or in the design section. I chose here, because it is a problem in the code itself. I have introduced myself in the introductory section, if you want to know a little bit more about what I am doing this for. I made a template design in The Gimp photo editor. I sliced it up, and opened up the HTML file in the editor Kompozer. It opened up just like it should, but I wanted a liquid type layout, so I turned the cell's widths into the corresponding percentages, though Kompozer rounded them off. (Shown below) However, when I previewed the file this time, it appeared as if it skipped every other cell, leaving a blank white space in its spot. Not even in the right percentages. I think I know what I've done wrong, looking back now that I am writing this thread. Can someone please point me in the right direction? EDIT: Code posted as comment, due to lack of character room. I actually feel a bit ridiculous because i can't solve a problem that will probably be as easy as hell... anyway, i have a table with some collspans and rowspans in it, but i can't seem to be able to set the width for the site in IE... Here's a simple representation of the table, since it's generated dynamically with PHP, so the number of rows and columns is not always the same...but the structure is: HTML Code: <table> <tr> <th rowspan=2 style="min-width=120px;">left column header</th> <th colspan=2 style="min-width=120px;">column 1 title</th> <th colspan=2 style="min-width=120px;">column 2 title</th> </tr> <tr> <td style="min-width=60px;">value1</td> <td style="min-width=60px;">value2</td> <td style="min-width=60px;">value1</td> <td style="min-width=60px;">value2</td> </tr> <tr> <td>row1 name</td> <td>row1 col1 value1</td> <td>row1 col1 value2</td> <td>row1 col2 value1</td> <td>row1 col2 value2</td> </tr> </table> So it should look a bit like this: Code: ------------------------------- | 120px | 120px | 120px | | |---------|---------| | |60px|60px|60px|60px| |---------|----|----|----|----| |rowname1 |val1|val2|val1|val2| |---------|----|----|----|----| |rowname2 |val1|val2|val1|val2| ------------------------------- there can be more rows with rowname, and more columns with the colspans... now in mozilla firefox this works just fine, but not in IE...even worse, if one of the values in the columns that are supposed to be 60px wide is negative, IE inserts a break between the '-' symbol and the numbers... i'm using HTML 4.01 Strict by the way... Hi! I've been trying to figure out why columns in my HTML-table get weird widths. ie. this code: HTML Code: <table width="950" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> column1 </td> <td colspan="5"> column2 </td> </tr> <tr> <td colspan="5"> <input type="text" value="column3" maxlength="20" style="width:165px;" /> </td> <td colspan="5"> column4 </td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> </table> gives me the result: Is there any way I can fix this so each of the columns get's equal size? Preferably without actually having to have to set the width on each of the bottom columns. If not, could anyone explain to me why it's acting this way? Thanks. |