A legacy website that I am working on has a popup box that uses an iFrame and has nested tables. Within the cells of this table there is simple text and the last row of the table has two input boxes; one left aligned and one right aligned.
On screen resolution higher than 1024 X 768 everything is displayed within the borders of the box. The problem lies when I have resolution of 1024 X 768 or lower the text expands wider then the box and therefore horizontal scroll bars are turned on. I like to modify the inline css styling that so prominent in this design so the text and buttons render the same in any resolution and no scroll bars are turned on.
The only thing I can see is that table width is set to 100%.
Any help will be a life saver.
Thanks
Please find screenshots attached:
> 1024 x 768 sample
1024 X 768
Here is the markup for the tables
<div align="center" style="padding: 8px 10px 4px;">
<table cellspacing="0" cellpadding="0" align="center" width="600px">
<tbody><tr>
<td align="center" valign="top">
<div class="container">
<TABLE cellSpacing="5" cellPadding="5" width="100%" class="gradientHeader">
<tr>
<th width="100%">
xxxxxx
</th>
</tr>
<tr>
<td width="100%">
some text
</td>
</tr>
<tr>
<td width="100%" style="PADDING-LEFT: 10px">
<table width="100%">
<tr>
<td width="100%">
<FIELDSET style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none;padding:0;">
<asp:RadioButtonList id="rbl" runat="server" />
</FIELDSET>
</td>
</tr>
<tr>
<td align="left">
<AN IMAGE BUTTON>
</td>
<td align="right">
<AN IMAGE BUTTON>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="hidProductId" id="hidProductId">
</td>
</tr>
</table>
</div>
</td></tr></tbody></table>
the table code you have given, will only scroll once a width less than 600px is reached because of the very first fixed width table
there is an error in colspans the cell with the fieldset in it should be colspan="2" and there is too much width="100%" there would be no need to put it every cell once the table is set to 100%.. however even with those there's nothing here that would force a scrollbar until <600px
I think the problem must be the width of the popup div and/or iframe instead
Related
I want to add table to my website that will not change height or width when I added a picture. The picture needed to automatic resize to td.
How can I do it?
<table style="width:100%" border="1">
<tr>
<td style="width:34%"><!--Right-->
<table border="1" style="width:100%">
<tr>
<!--Symbol--><td>
<i class="fa fa-arrow-circle-right" style="font-size:72px"></i>
</td>
<!--Name--><td style="text-align:center"><b><font style="font-size:42px">dsfdsfs</font></b><br /><font style="font-size:32px">sdfdsdsf</font></td>
<!--logo--><td>
</td>
</tr>
</table>
</td>
<td style="width:32%" rowspan="8"><!--center-->
</td>
<td style="width:34%"><!--Left-->
<table border="1" style="width:100%">
<tr>
<!--logo--><td></td>
<!--Name--><td style="text-align:center"><img src="images/company/integrity.png" /></td>
<!--Symbol--><td style="text-align:left">
<i class="fa fa-arrow-circle-left" style="font-size:72px; left:0"></i>
</td>
</tr>
</table>
</td>
</tr>
</table>
Use max-width and max-height and set it to size of td or 100%
And I would like to suggest you NOT to write inline styles...
you using the % value to the table. So table are using current resolution i mean of the window in which you opened the page. In order to say for the table to stay in same height you need to use pixels for example:
570px; not 100% or 50% of the viewing screen.
so for the fist line i believe you can simple use the pixel value.
for example:
<table style="width:1200px" border="1">
for the image don't forget to add 100% values for example:
<td style="text-align:center" width="100%" height="100%"><img src="images/company/integrity.png" /></td>
I'm having trouble with a table's behaviour in Firefox. I want a table consisting of two columns in the ratio 3:1. The first column includes 3 images in a second table which should resize to fit into the column.
In Chrome the images resize to fit into the first column, which is correctly set to 75%. They do this whether I specify a max-width or do not give them any size attributes. However, in Firefox, the images do not resize and instead the cell expands to be greater than 75%, meaning that the contents of the second column becomes squashed.
The structure of the code looks like this:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<table cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td>
<img src="image1.jpg" style="max-width:625px;" />
</td>
<td rowspan="2">
<img src="image2.jpg" style="max-width:240px;" />
</td>
</tr>
<tr>
<td>
<img src="image3.jpg" style="max-width:625px;" />
</td>
</tr>
</tbody>
</table>
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
How can I adapt this code so that it works correctly in Firefox as well as in Chrome? I've read other related questions, but haven't been able to find a solution I can get to work.
P.S. Please no comments on how I shouldn't be using CSS like this. I have my reasons for not using a proper stylesheet while I'm playing around.
Unless I'm missing the boat, why don't you simply assign a relative width to the image? A value of 100% will ensure the image resizes in tandem with its parent table cell:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width:100%;" />
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
ref: http://jsfiddle.net/j26Fm/
The trick here I would say is table-layout: fixed;. It does require some additional rules but table-layout is what brings it all together.
Check out: http://codepen.io/pstenstrm/pen/kLKxz
This is worked for me, in IE, FF and Chrome.
<table style="table-layout: fixed; width: 100%; border: 0; cellspacing: 0; cellpadding: 0;">
and
<tr valign="middle">
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
I'm facing problem with table in html,
actually I fixed the width,and want to increase the td height as per the content in it,
for example : if td width is 30px and when data inside td crosses the td width i want to show remaining data in next line and so on..
table:
<table width="100%" border="1" >
<tr>
<td align="left" width="30px">
laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa text
</td>
<td align="left" width="30px">
text
</td>
</tr>
</table>
Here is the solution to your problem! The width of the columns are equal in this case, though they can be changed, not to mention.
<table border="1" width="100%" style="table-layout:fixed">
<tr>
<td style="word-wrap:break-word">Hellohellohellohellohellohellohellohellohellohellohello
<td>text</td>
</tr>
</table>
And here is the demo http://jsbin.com/ihaxob/2/edit ..
I have seen the solution from this thread!
Word-wrap in an HTML table
Is it possible to align textbox and image in same line so both of them occupy 100% of cell's width? (without setting specific width to the textbox like width:95%)
<table style="margin: 0px;float:left" border="1" width="50%" cellpadding="5" cellspacing="5">
<thead>
<tr>
<td class="title" colspan="2">
Options
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="header" style="width: 110px;">
Date
</td>
<td>
<input name="txtRelease" type="text" id="txtRelease" style="float:left;display: block;width: 100%;height: 100%;" /><input type="image" name="ImageButton1" id="ImageButton1" style="float:left;" src="http://www.classiclodges.co.uk/images/icon_date_picker.jpg" style="border-width:0px;float:right" />
</td>
</tbody>
</table>
http://www.webdevout.net/test?01O&raw
You can have your image as background on the textbox instead. Try this on your textbox css.
background: url("http://www.classiclodges.co.uk/images/icon_date_picker.jpg") no-repeat scroll right center transparent;
I used a wrapper element and absolute positioning.
Live demo: http://jsfiddle.net/62sAU/6/
Alternative layout (added some padding): http://jsfiddle.net/62sAU/7/
Do you want like this ? http://www.jsfiddle.net/Tt5gu/
For this you have to expand width of and set width in pixel.
In summary, you couldn't set width values very well. You have to calculate widths :)
I have this problem on my website's layout, and it's basically preventing me from continue it, it's destroying everything.
Here goes the HTML code:
<table cellpadding="0" cellspacing="0" width="446" height="362">
<!-- MSTableType="layout" -->
<tr>
<td valign="top" colspan="2" height="110">
<p align="center">Banner</td>
</tr>
<tr>
<td valign="top" height="95">I want this cell to have a fixed height</td>
<td valign="top" rowspan="3" width="305">
<p align="center">Text goes here - if the text is too long, I want the
stretching cell to vary in height, not the other 2.</td>
</tr>
<tr>
<td valign="top" height="68">I want this cell to have a fixed height</td>
</tr>
<tr>
<td height="89" width="141" valign="top">Stretching/Flexible cell - I
want this one to vary in height if the text on the right cell is too
long</td>
</tr>
</table>
As you can see, if I write a text that is larger than the "Text Cell" height, all the cells in the right column stretch, and I only want the last one to do so. Can you help me?
If you try to make a website with tables, then welcome to 21sst century. Table layout is very outdated. Try a site like http://www.pmob.co.uk/temp/3colfixedtest_4.htm. There you find a web standard layout.
Make the height of the bottom-left cell "*" like this:
<table cellpadding="0" cellspacing="0" width="446" height="362">
<!-- MSTableType="layout" -->
<tr>
<td valign="top" colspan="2" height="110">
<p align="center">Banner</td>
</tr>
<tr>
<td valign="top" height="95">I want this cell to have a fixed height</td>
<td valign="top" rowspan="3" width="305">
<p align="center">Text goes here - if the text is too long, I want the
stretching cell to vary in height, not the other 2.</td>
</tr>
<tr>
<td valign="top" height="68">I want this cell to have a fixed height</td>
</tr>
<tr>
<td height="*" width="141" valign="top">Stretching/Flexible cell - I
want this one to vary in height if the text on the right cell is too
long</td>
</tr>
</table>
This won't let you define the minimum height of the cell, but it works. Best of course would be to use css.
Actually, as I think about this, you can set the height of your right column to "257" (the sum of your left heights, and that will mean that your * will default to 89 if the right column does not stretch.
I am sure this is not cross-browser compatible however... Yup, just dusted off IE6, and it doesn't behave as one would expect. Firefox works great, though.
This probably means that css would be your best bet.
I would at least try to learn some CSS and use it to style and size your tables, instead of using HTML. There are many good tutorials out there, but for example:
table {
width: 600px;
}
table td {
padding: 5px;
}
will make your table 600px wide and give every <td> 5px of padding. Assign any cells or rows ids (unique) and classes (apply to a group) for more precise control.
As noted above, although it is not really an answer to your question, the best way to do what you want to do is to learn how to create CSS layouts using <DIV> tags. This will give you much more control of your page layout, and although requires some learning up front, will save you tremendous amounts of headaches in the future using tables.
Actually, looking at your example again. a based layout here would be very simple.
<div id='container'>
<div class='banner'>Banner</div>
<div class='fixed'>Fixed Height</div>
<div class='dynamic'>Expanding div to fit text inside</div>
<div class='fixed'>Fixed Height</div>
<div class='dynamic'>Expanding div to fit text inside</div>
</div>
This will give you the same layout as your table with some CSS styling.
EDIT: One last word on the matter. For me personally, if I know that an area is going to be a grid type area with no special formatting needs for different areas a <table> is fine, otherwise I will always use a CSS based layout.
Thanks for the responses guys. I tried for the last few hours to built this with divs, but i'm going nowhere. I have lots of rowspans ans colspans, and I can't put them in CSS.
Actually the design is WAY more complicated that the simple table I posted here:
<table cellpadding="0" cellspacing="0" width="750" height="871">
<!-- MSTableType="layout" -->
<tr>
<td valign="top">
<p style="margin-top: 0; margin-bottom: 0">Banner</td>
<td valign="top" rowspan="3">
<p style="margin-top: 0; margin-bottom: 0">Banner</td>
<td valign="top" rowspan="3" colspan="2">
<p style="margin-top: 0; margin-bottom: 0">Banner</td>
<td height="154"></td>
</tr>
<tr>
<td valign="top">Banner</td>
<td height="24"></td>
</tr>
<tr>
<td valign="top" rowspan="3">Fixed Menu Cell</td>
<td height="122"></td>
</tr>
<tr>
<td valign="top" colspan="3">
Banner</td>
<td height="29"></td>
</tr>
<tr>
<td valign="top" rowspan="6" colspan="2"><p> </p>
<p>CONTAINER AREA, Text goes Here</p>
</td>
<td valign="top" rowspan="6">
</td>
<td height="102"></td>
</tr>
<tr>
<td valign="top">
Fixed Menu Cell</td>
<td height="37"></td>
</tr>
<tr>
<td valign="top">
Fixed Menu Cell</td>
<td height="44"></td>
</tr>
<tr>
<td valign="top">
Fixed Menu Cell</td>
<td height="178"></td>
</tr>
<tr>
<td valign="top">
Fixed Menu Cell</td>
<td height="109"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">Flexible Cell - can vary depending on the
Container Area</td>
<td height="33"></td>
</tr>
<tr>
<td valign="top" colspan="4">
<p align="center">Bottom</td>
<td height="38"></td>
</tr>
<tr>
<td width="252"></td>
<td width="410"></td>
<td width="56"></td>
<td width="30"></td>
<td height="1" width="2"></td>
</tr>
</table>
I'm trying to convert this mess to DIV, but I don't think I'm going to make it ^^''
It seems such a simple problem, but I can't see a simple soluction...