How to create a scrollable container without forcing scroll on the parent container?

Get Started
1

My markup is below. I’m trying to create a div element (templateContainer), which has several floated divs that will be layed out horizontally creating a horizontally scrollable viewport. However, I don’t want the width the the parent container to exceed the viewport width.

The problem I’m having is that when I apply css to make the “bodytextArial” table 100%, its not 100% of the viewport (the actual browser width) but rather, it expands to the width of the templateContainer element.

What am I missing?


table {width:95% !important; overflow:scroll}
.templateContainer {width:8500px;} 
.previewTemplates {width:100%;overflow:scroll;}
.templatetable {width:100%;overflow:scroll;}

<table width="800" class="bodytextArial"> 
  <tr>
    <td colspan="4">
	<style type="text/css">.templateContainer {width:8500px;}</style>
	<table class="templatetable"><tr><td class="templates">
		<div class="intro">
			<div class="previewTemplates" style="position:relative;box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);-webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);-moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);">
				<div class="templateContainer" style="border:none">
					<!--content goes here that will exceed the width of the parent contain but should create a scrollbar on the this container and not the parent table container

				</div>
			</div>
		</div>
		</td></tr>
	</table>
	</td>
	</tr>
</table>
2

Hi Stevie, I hear you. The problem is that its not my code. I’m trying to work with a WordPress application in which I don’t have access to the source code to remove the tables.

I’m trying to make Lemonade out of lemons :slight_smile:

3

Tables are notoriously difficult to constrain, and like to expand to contain their contents.

The question is, why on earth are you using not just one table but two tables here? There’s nothing tabular about it in any way, shape or form. A simple <div> container should be ample, and there’s a better chance of getting it to behave than (mis)using tables here.