cwolves
asked on
simple positioning issue
I want a TD cell in the middle of a page to have horizontal scrollbars if the content is too wide. I'm going brain dead or something and can't figure it out.
<style>
table{
width:100%;
overflow:hidden;
}
td{
width:100%;
overflow:hidden;
}
</style>
<table>
<tr>
<td><nobr>
!!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!!
</nobr></td>
</tr>
</table>
the actual content is a "window" inside of a layout. this is just a simplified example. I basically want it to stretch to the width of the container, but have scrollbars beyond that width.
<div> tags would be fine too.
<style>
table{
width:100%;
overflow:hidden;
}
td{
width:100%;
overflow:hidden;
}
</style>
<table>
<tr>
<td><nobr>
!!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!!
</nobr></td>
</tr>
</table>
the actual content is a "window" inside of a layout. this is just a simplified example. I basically want it to stretch to the width of the container, but have scrollbars beyond that width.
<div> tags would be fine too.
Lee W, MVP
I could be wrong and way off, but it sounds like an <iframe></iframe> tag is what you are looking for. I've never heard of tables able to do this natively.
ASKER
they can.
if you are going to use iframe, suggested by leew. I tried it, it works fine....
You may need 2 files instead of 1.
****test.htm
<style>
table{
width:100%;
overflow:hidden;
}
td{
width:100%;
overflow:hidden;
}
</style>
<table>
<tr>
<td><nobr>
!!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!!
</nobr></td>
</tr>
</table>
****display.htm:
<iframe width="100%" src="test.htm"></iframe>
You may need 2 files instead of 1.
****test.htm
<style>
table{
width:100%;
overflow:hidden;
}
td{
width:100%;
overflow:hidden;
}
</style>
<table>
<tr>
<td><nobr>
!!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!!
</nobr></td>
</tr>
</table>
****display.htm:
<iframe width="100%" src="test.htm"></iframe>
and <div style="width:100%:"> didn't do it for you?
-r-
-r-
ASKER
<div style="width:100%;"> does 100% page width, not container width
and iframes aren't compatible!!!
and iframes aren't compatible!!!
Then you should add a style="position:relative;"
You can use a textarea to do the scrolling, but it might be a mission to write some javascript to apply styles and set the with of the textarea...
ASKER
arg...I want a div that scrolls. or a table cell, or anything else, but I want it to fill 100% of the parent's width
textareas are useless cause it has real content.
textareas are useless cause it has real content.
Try something like this:
Add this to <HEAD>...</HEAD>:
<style type="text/css">
<!--
div.scroll {
height: 20px;
width: 100%;
overflow: auto;
padding: 0px;
}
-->
</style>
Replace <TABLE>...</TABLE> with this:
<div width="100%" class="scroll">
<NOBR>
!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!
</NOBR>
</div>
Add this to <HEAD>...</HEAD>:
<style type="text/css">
<!--
div.scroll {
height: 20px;
width: 100%;
overflow: auto;
padding: 0px;
}
-->
</style>
Replace <TABLE>...</TABLE> with this:
<div width="100%" class="scroll">
<NOBR>
!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!
</NOBR>
</div>
ASKER
again, that's 100% of the page width. I need it to fit to it's parent container.
Can you show us an live example, cause working on imaginairy or "alike" code just often is not the way to get things working, cause of the possible interference of surrounding code.
Regards
-r-
Regards
-r-
ASKER
<table width="100%" bgcolor="#000000" cellspacing="1" cellpadding="0">
<tr bgcolor="#FFFFFF">
<td width="200">some content on the left side</td>
<td><nobr>content that I want to stretch. If you take the space out of the <no br> tag in this cell, making it a <nobr> tag, you'll see that it pushes the entire table right. I want it to have a horizontal scrollbar instead of doing that.</nobr></td>
<td width="200">some content on the right side</td>
</tr>
</table>
<tr bgcolor="#FFFFFF">
<td width="200">some content on the left side</td>
<td><nobr>content that I want to stretch. If you take the space out of the <no br> tag in this cell, making it a <nobr> tag, you'll see that it pushes the entire table right. I want it to have a horizontal scrollbar instead of doing that.</nobr></td>
<td width="200">some content on the right side</td>
</tr>
</table>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
yeh, I know. I was just using that to make fake streched content :-)
the real content is being stretched with images.
the real content is being stretched with images.