I have a html table with a scrollable div inside. The table won't wrap the div. Why?

C

CuriousCliff

New member
I have an HTML table with following style:
.BoxHolder {
display: inline;
border: 1px solid black;
cursor:pointer;
width:200px;
height:200px;
}

And a div inside of this table with the following style:
.BoxItemScroll{
overflow:auto;
width:198px;
height:198px;
}

The first problem is that in the table item seems to ignore the height parameter entirely, and the second problem is that even though the inner div is respecting the height parameter it is given (198px) the outer table will not wrap around the div. i.e. it appears that the table sits above the div as opposed to the div being inside of the table.

This happens on the Firefox browser, and possibly others but I haven't checked. It needs to work on Firefox more than anything else, mainly because the people I'm maintaining this project for prefer Firefox.
 
Ha! We're having about the same problems on our site (using Mozilla Firefox as well). Ours seems to respect the height parameter (if you take "px" away, it might work), but it won't do relative heights (like "100%"), which is a problem of sorts.

This may be an underlying problem in the browser itself.
 
.BoxHolder {
display: block;
+
<div class="BoxHolder">
<div class="BoxItemScroll">
...some stuff<br />
...some stuff<br />
...some stuff<br />
...some stuff<br />
...some stuff<br />
...some stuff<br />
...some stuff<br />
...some stuff<br />
...some stuff<br />
...some stuff<br />
...some stuff<br />
...some stuff<br />
...some stuff<br />

</div>
</div>
 
I think you should make the div's width and height 200px as well.
i believe when you have a border on a table, it extrudes and does not take away from the specified width / height.

also, add a" align:center; valign:center;" to your table class to ensure the div gets centered.

also.. if you are just using that table class for that one div, make sure that when you write it out it looks sumtin like this.
<table class="BoxHolder">
<tr>
<td height="200px">
<div class="BoxItemScroll">
</div>
</td>
</tr>
</table>

do you have an example, anyway I could see it?
 
I think you should make the div's width and height 200px as well.
i believe when you have a border on a table, it extrudes and does not take away from the specified width / height.

also, add a" align:center; valign:center;" to your table class to ensure the div gets centered.

also.. if you are just using that table class for that one div, make sure that when you write it out it looks sumtin like this.
<table class="BoxHolder">
<tr>
<td height="200px">
<div class="BoxItemScroll">
</div>
</td>
</tr>
</table>

do you have an example, anyway I could see it?
 
Back
Top