Table scrollbar?

[kiwi]

Is there anyway to put a scrollbar into a table?
Because If I put more text into a cell the cell gets higher...and I don't want it to!:-)
Thanks

[ronin]

iframes?

[BlobFisk]

This is an excellent topic as it touches on both usability and user interface engineering. More and more applications these days are being built with thin, web based interfaces. This poses a lot of problems for the interface developer in terms of usability. Many of the paradigms of UI development become very very difficult to fulfill in this environment.

One of the more difficult effects to achieve is a static table header and scrolling data.

The quick answer to your question kiwi is yes - you can set the <tbody> to be fixed and scrolling and you achieve what you want.

Now for the longer version! IE does not support this! You can however mock this up using two divs and two tables! It's a long winded hack but it allows us to achieve a good level of usability on long data tables.

The setup is the first div holds a table which acts as the static header. The second div holds the data table. We then use classes on the header table tds and the first row tds on the body table. These classes set the width for each column. Since they are using the same classes they will be the same width.

On the two layers we set the padding to 0 and the margin-top and margin-bottom on the body and header divs respectively to 0. Add a top, let and right border and we get what looks like one table.

On the body layer set the height to whatever you want and the overflow to auto in the CSS. You may need to do some tweaking, but this will hack out the functionality.

Outline:

<div id="tableHeader">
<table>
<tr>
<td class="row1">
<td class="row2">
<td class="rwo3">
</tr>
</table>
</div>
<div id="tableBody">
<table>
<tr>
<td class="row1">
<td class="row2">
<td class="rwo3">
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
<div>

<edit>Typo fix...</edit>

[edited by: BlobFisk at 10:52 pm (utc) on May 16, 2004]

[lilbear17]

I just did this using css with overflow. You call it by using class="flow" id="auto" in a div around whatever text you want to scroll and it essentially creates a scrolling cell within any context. the following is what goes in the css doc.

div.flow {
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
border: 0px solid #ffffff;
width: 460px;
height: 140px;
margin-bottom: 5px;
margin-top: 5px;
margin-right: 5px;
margin-left: 15px;
}

#visible {
overflow: visible;
}

#hidden {
overflow: hidden;
}

#scroll {
overflow: scroll;
}

#auto {
overflow: auto;
}