I have following html:
<table>
<tr>
<td class='tclone' id='clone'></td>
<td class='loader' id='loader'>
<div id='tdiv' style="height:630px; width:835px; overflow:auto;"></div>
</td>
</tr>
</table>
I open this HTML in a new window and JavaScript append contents to tclone and tdiv.
tdiv specifically loads a image. I needed to give the width and height parameters to
div as it was overflowing past the window, also overflow parameter allows scroll-bar inside td. This solution works with fixed size window -
but I want a mechanism, such that when user resizes the window the div also gets expanded
and the div scroll-bars are also adjusted to match the new window size.
any suggestions?
You need to specify the width and height in percentage then:
<div id='tdiv' style="height:30%; width:30%; overflow:auto;"></div>
You should adjust the percent values though.
On the table set "table-layout: fixed". Make sure the table and td widths are % based. You shouldn't need a width on the div.
If the content that overflows the div is not contained in another tag, you'll need a wrapper around tdiv.
An alternative to % widths would be setting the min-width and/or max-width attributes.
Related
I am trying to set up a scrolling table with a maximum height, and to do that I have:
<table>
<tbody style="height: 300px; overflow:auto;">
//php for loop, populating table with <tr>s/<td>s
</tbody>
</table>
This works fine, but if there is only one or two rows they are stretched to fit the 300px height. I switched height to max-height but then the scroll bars never appeared, no matter how large the table got. Where am I going wrong?
I don't know why the tr's and td's are filling the height up when there are few, but you could do a couple things I think.
Try styling the cells to be a certain height, or even don't style anything to a height, and style the div that the table is in to a height. I've done the latter, and it works for me. The cells all stay a normal height, depending on whats in them.
I'm writing some HTML to be inserted into a page. The current structure is something like this:
<table>
<tr>
<td rowspan="2">left column</td>
<td height="1">top row above content</td>
</tr>
<tr><td height="220">my content here</td></tr>
</table>
I have complete control over the table but nothing else. What I want to do is to have a the content fill the entire cell. I have gotten the width, but I can't get the height right.
Some things I have tried are:
Setting the height to 100%.
Attributes like height=200.
Giving the content absolute positioning. This unfortunantly made it fill the page instead of the cell.
The main problem that I haven't solved is because of the left column and content varying in height. When the left column is larger than the content it won't expand. Unfortunantly, fixed height iQsn't an option because it isn't responsive.
How can I make the content fit the the entire table cell?
Have you considered an iframe? seems to me you could set the parameters of the iframe inside a table cell, div, as the iframe usually doesn't care where it is on the page.
I have table within the div. If I view it with IE9 or FF then it is ok. But if I view it within IE8 the table grows beyond the div border. Any ideas?
<div>
<table width="100%" >
<tr>
<td>
</td>
</tr>
</table>
</div>
found the solution here:
http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
The trick is to use the CSS property table-layout. It can take three
values: auto, fixed, and inherit. The normal (initial) value is auto,
which means that the table width is given by its columns and any
borders. In other words, it expands if necessary.
What you want to use is table-layout:fixed. Bam! Now the table is as
wide as you have specified in the CSS. No more, no less. And to my
great surprise this seems to be widely supported by browsers. The only
browser of any significance that does not support it is IE/Mac, and
the significance of that browser is rapidly approaching zero.
Next is deciding what to do with the content that doesn’t fit in the
table anymore. If the table only contains text, word-wrap:break-word
(word-wrap is specified in the CSS3 Text Effects Module) will force
the browser to break words as necessary to prevent overflow.
You could set it inside its own div with overflow: scroll; so that it makes a scrollbar when the table expands too much...
Add the style display:table to the div tag. This causes the element to act like a table.
Give table width as 100% so that it will occupy div and wont cross it.
As user384080 mentioned, table-layout:fixed should be added. However, merely having table-layout doesn't always fix the problem. Please make sure that you add the width attribute as well:
<table style="width:100%;table-layout:fixed">
check what box-sizing is set by default by the browser.
box-sizing: content-box; means:
The specified width and height apply
to the width and height respectively
of the content box of the element. The
padding and border of the element are
drawn outside this area.
box-sizing: border-box; means:
The specified width and height
determine the border box of the
element. Any padding or border
specified on the element is drawn
inside the remaining area. The content
box is computed by subtracting the
padding or border widths of the
respective sides from the specified
width and height.
it night just be a matter of changing the box-sizing value.
there's an article about it here: http://ie8demo.com/BoxSizing.aspx
Do you have a width set on the div? If so, it will stick to its width, allowing the table to overlap. Try removing the width and it will expand to its container's width. If you want thwe div to fit the table size, you can float it.
In addition to the first answer, make sure that the container element of the div has overflow: auto or scroll. The clearfix hack is helpful, too.
I have a table who's columns contain two inline divs, one displaying an image, and the other display text, side by side. So each td is rectangular with an image on the right and text beside it on the left (on a single line). The problem (which happens in all browsers) is when I shrink the horizontal browser size, rather than keeping the td width fixed and adding a horizontal scroll bar, it is wrapping the text and moving it under the image, hence shrinking the width of the td. How can I get the td widths to stay fixed regardless of the browser width? Oh and in case its affecting it, both divs have relative positioning so that I can slightly adjust their position within the td. Also, I can't fix the width of the td since each column width must slightly vary depending on the text. Thanks
<td>
<div style="display:inline;position:relative;">
<img src="some_image.jpg" />
</div>
<div style="display:inline;position:relative;">
some short text
</div>
</td>
You can add the 'nowrap' attribute to the td:
<td nowrap>
or style it with:
td {white-space:nowrap;}
Basically your problem is right there in the question "How can I get the td widths to stay fixed ... Also, I can't fix the width of the td since ..." :)
Anyways, there are two possible solutions that I can think of.
If you know what maximum width of the table you want to allow, you could wrap it in a div with a fixed width. That way the body of your page won't shrink to less of the width of the wrapping div, and therefore it will not push on your table.
Use javascript to fix the width of the td after the page has loaded. That way it will be fixed to whatever width its contents have expanded it to.
You should be able to get the width from the td from the offsetWidth property.
Please consider the following:
<td style="width: 500px;">
<div style="width: 400px;">SomeContent</div>
</td>
For some reason, the column that contains a div will not expand to 500px as the style suggests.
Do you know how to get the td to honor the width that I am specifying in the style?
In theory, you can use the min-width and max-width styles. In practice, some popular browsers ignore these styles. In this case you have explicitly declared a width of 400, so it should always equal 400 unless acted upon by a child growing or a parent shrinking. You could runat-"server" and programatically determine the width attribute based on content size, or you could play with the overflow style, or put it in a Panel with a horizontal scrollbar.
is there a width on the table and other tds within the table? Also, have you got a doc type going on?
However, that said, here's your solution:
<td style="width: 500px">
<div style="padding: 0 50px">SomeContent</div>
</td>
Setting your padding appropriately.
Having reread your question, I feel that this might not be the answer you're looking for. Could you elaborate a little more?
try this:
<td style="width:500px;">
<div style="width:100%;">SomeContent</div>
</td>
if however you want the td to be the exact size of the div, to a MAX of 500px, then try:
<td style="max-width:500px;">
<div style="width:100%;">SomeContent</div>
</td>
Keeping in mind that IE6 doesn't understand max-width, and will just force it to be 500px.
You have no reason to set a fixed width on the DIV within the TD, by default DIV's are block elements which means they will fill the full width of there containing element.
Either set padding on the TD or margin on the DIV to achieve the same style.
Without seeing futher markup or css i can't see any reason why the TD would not be 500px, if you added two different background colors to the elements you will indeed noticed that the TD will be 100px wider than the div.