Scroll bar inside a table?

My page consists of tables. I wish to use a scroll bar on my page but only in a certain area inside a table. Is that possible without using frames?

Code:

---

<div>
  <span style="overflow-y:auto;height:450;">
    <table border="0" align="center" >                           
      :
      :
      </table>
  </span>
</div>

---

Quote:

---

Originally posted by DeadEyes

Code:

---

<div>
  <span style="overflow-y:auto;height:450;">
    <table border="0" align="center" >                           
      :
      :
      </table>
  </span>
</div>

---

---

There's a couple of things I just wanted to point out. 1. You should put that in the div or table and remove the span (as DIV is a block element, and I'm pretty sure you can't put a block element (table) in an inline element (span)). And 2 you need to include a unit other-wise a conforming browser (e.g. Mozilla, opera, will ignore the height). So it should look more like this:

Code:

---

<table border="0" align="center" style="overflow-y:auto;height:450px;">       
  :
  :
  </table>

---

RickBull, I just pulled the code from here:

Code:

---

<xsl:template name="showlist">
<div>
        <span style="overflow-y:auto;height:450;">
                  <table border="0" align="center" width="50%">
                        <xsl:for-each select="//XMLControl[Name='pageitem' and Type='Text']">
                                  <tr>
                                  <td nowrap="true">       
                                                  <xsl:call-template name="Text"/>
                                          </td>
                                  </tr>
                          </xsl:for-each>
                          <tr>
                                  <xsl:for-each select="//XMLControl[Name='numrecords' and Type='Text']">
                                          <td>       
                                                  <xsl:call-template name="Text"/>
                                          </td>
                                  </xsl:for-each>
                          </tr>
                </table>
        </span>
</div>
</xsl:template>

---

which works fine for me. but then I am writing browser apps so
I can specify what browser is required.
With regard to you saying about DIV's being block elements
and SPAN's being inline, do you know offhand where I can find more info
about this

Edit: Just looking back over some of my code and that place above
is the only one where I used the SPAN in all the others the
style is in the DIV and there is no SPAN tags at all.
Placing the style in the TABLE doesn't appear to work for me (IE6)

Ah I see. Well the best place to get info on anything HTML-wise is the HTML 4.01 specs and the section on DIVs and SPANs. This is the bit that says you can only have inline content for spans:

Quote:

---

These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content.

---

As for the overflow thing not working on table, I think it's prbably because IE is buggy with a lot of CSS. If you test it in Mozilla it should work, but if there's a problem obviously you're right to contain it in a DIV.

Thanks for the link much appreciated.

No problem. If you have the time the whole thing is worth the read. I've learnt quite a lot from it, especially on the tables section - that's one long page :eek:

interesting, tables aren't suppose to have overflow property. that is why you put the overflow in the div tag.

Tables are allow to have an over flow propery I think:

Quote:

---

'overflow'
Applies to: block-level and replaced elements

---

Tables are block-level elements aren't they, so technically it should work.

I can't find anything that says the table is a block-level element. and I didn't thnik it was.

Yep it is, here's the quote from the HTML 4.01 DTD:

Quote:

---

<!--================== HTML content models ===============================-->

<!--
HTML has two basic content models:

%inline; character level elements and text strings
%block; block-like elements e.g. paragraphs and lists
-->

<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

<!ENTITY % flow "%block; | %inline;">

---

Block is pretty much anything that takes up a whole line, and squeezes anything afterwards onto a new line, which is what a table does.

ok, now that we know that it still doesn't do the overflow. not even in Mozilla, granted I am only using 1.1 so not sure about 1.3a. and if IE doesn't do it then I wouldn't worry about ti as IE has 95% of the market.