Allegro.cc - Online Community

Allegro.cc Forums » Programming Questions » [HTML] How do I make a <table> with scrollbars?

This thread is locked; no one can reply to it. rss feed Print
 1   2   3 
[HTML] How do I make a <table> with scrollbars?
Edgar Reynaldo
Member #8,592
May 2007
avatar

I can't seem to come up with a way to make a table with a vertical scroll bar so that I can scroll up and down in the table without scrolling up and down in the window. Ideally , I'd like the table header , caption and row headers be fixed in place. If it's possible , I'd like to do it without javascript. Any one know how to do this?

I'm also having trouble getting the table to be a predefined width and height.
I tried it like this :

<table width=100px; height=100px>

but that just resizes the cells in the table. What am I doing wrong?

CGamesPlay
Member #2,559
July 2002
avatar

Put the table in a div that has a style of overflow: auto; and a height.

--
Tomasu: Every time you read this: hugging!

Ryan Patterson - <http://cgamesplay.com/>

Dustin Dettmer
Member #3,935
October 2003
avatar

I don't think its really possible. The next best thing is to make a separate table for the header and use Ryans trick for the inner/scrolling table.

Hm.. on second thought... maybe try this?

1<style>
2colgroup.scroller {
3 overflow: auto;
4}
5</style>
6 
7<table>
8 <tr>
9 <th>Header Blah</th>
10 <th>Header Blah</th>
11 </tr>
12 <colgroup span="2" class="scroller"></colgroup>
13 <tr>
14 <td>Data</td>
15 <td>Data</td>
16 </tr>
17</table>

You have to manually enter the number of columns in 'span'. 0 is supposed to mean 'all columns' but apparently support for it is flimsy.

Matthew Leverton
Supreme Loser
January 1999
avatar

One browser (Firefox?) supports scrollable tables via:

<table>
  <thead><tr> ... </tr></thead>
  <tbody style="max-height: 400px; overflow: auto;">
    <tr> ... </tr>
  </tbody>
<table>

That would be the sensible way to support it, but you won't find any other browsers that do it.

You're best off making a JS function that splits tables into two. It's not very hard.

Timorg
Member #2,028
March 2002

I don't know if this solution is any good, or if it works in IE. I use linux, so it's not so easy to check. But here is how I would solve the problem.

http://www.timorg.net/scroll.html

1<TABLE CELLPADDING=0 CELLSPACING=0>
2<TR><TD>
3 <TABLE BORDER=1 CELLSPACING=0>
4 <TR>
5 <TD WIDTH=150>Colomn 1</TD><TD WIDTH=150>Colomn 2</TD><TD WIDTH=150>Colomn 3</TD><TD WIDTH=150>Colomn 4</TD>
6 </TR>
7 </TABLE>
8</TD></TR>
9<TR HEIGHT=100><TD>
10 <DIV style="overflow-y:scroll; width: 100%; height: 100">
11 <TABLE BORDER=1 CELLSPACING=0>
12 <TR><TD WIDTH=150>one-one</TD><TD WIDTH=150>two-one</TD><TD WIDTH=150>three-one</TD><TD WIDTH=150>four-one</TD></TR>
13 <TR><TD WIDTH=150>one-two</TD><TD WIDTH=150>two-two</TD><TD WIDTH=150>three-three</TD><TD WIDTH=150>four-four</TD></TR>
14 <TR><TD WIDTH=150>one-three</TD><TD WIDTH=150>two-three</TD><TD WIDTH=150>three-three</TD><TD WIDTH=150>four-three</TD></TR>
15 <TR><TD WIDTH=150>one-four</TD><TD WIDTH=150>two-four</TD><TD WIDTH=150>three-four</TD><TD WIDTH=150>four-four</TD></TR>
16 <TR><TD WIDTH=150>one-five</TD><TD WIDTH=150>two-five</TD><TD WIDTH=150>three-five</TD><TD WIDTH=150>four-five</TD></TR>
17 <TR><TD WIDTH=150>one-six</TD><TD WIDTH=150>two-six</TD><TD WIDTH=150>three-six</TD><TD WIDTH=150>four-six</TD></TR>
18 <TR><TD WIDTH=150>one-seven</TD><TD WIDTH=150>two-seven</TD><TD WIDTH=150>three-seven</TD><TD WIDTH=150>four-seven</TD></TR>
19 <TR><TD WIDTH=150>one-eight</TD><TD WIDTH=150>two-eight</TD><TD WIDTH=150>three-eight</TD><TD WIDTH=150>four-eight</TD></TR>
20 <TR><TD WIDTH=150>one-nine</TD><TD WIDTH=150>two-nine</TD><TD WIDTH=150>three-nine</TD><TD WIDTH=150>four-nine</TD></TR>
21 <TR><TD WIDTH=150>one-ten</TD><TD WIDTH=150>two-ten</TD><TD WIDTH=150>three-ten</TD><TD WIDTH=150>four-ten</TD></TR>
22 </TABLE>
23 </DIV>
24</TD></TR>
25</TABLE>

-Tim

____________________________________________________________________________________________
"c is much better than c++ if you don't need OOP simply because it's smaller and requires less load time." - alethiophile
OMG my sides are hurting from laughing so hard... :D

Edgar Reynaldo
Member #8,592
May 2007
avatar

- CGamesPlay -
I put this in :

<div style="overflow: auto; height=50px; width=100px">(Table stuff)</div>

but it doesn't resize the table , and there are no scroll bars.

I found this site , which generates the code for you and it comes up with the same thing , enclose the table in div tags and use overflow: auto; for the div style as well , but that's not working.

<div style="overflow: scroll; height=50px; width=100px">

I changed it to overflow: scroll; and scroll bars appeared with no scroller , and the table still doesn't resize. When I resize the window , the table cells start to wrap , but I don't want that. How do I fix the table cells at their minimum width so that they don't wrap and scroll bars appear?

I found this web page , which has two scrolling tables , and it looks like it uses overflow:auto in the div tags too.

- Dustin -
Okay , I added in that style section and put in the colgroup tags like you said. It works somewhat as long as I keep the table in a div tag with a style of overflow: scroll; , however , even if I put the colgroup tag after the th table headers , it scrolls the entire table.

- Matthew -
I tried out

<tbody style="overflow: auto; max-height=100px">

and that doesn't work to bring up scroll bars. If I change it to overflow: scroll; , scroll bars come up but only a horizontal scroller when it doesn't need to be scrolled , and no vertical scroller when there's not enough space for all the rows. What did you mean by using javascript to split the table in two? I've never even used javascript before. Would it read the table and make one table with the headers and another table with the rest of the rows or what?

- Timorg -
Your html works for me in both SeaMonkey and IE7 , although it's a little strange to have to put two

<tr><td><table></table></td></tr>'s

inside another table just to get it to scroll properly. I do have one problem with it though , and that's that I want the table headers and the table rows to have the same width columns. I guess since I will know the number of columns ahead of time I can just add in a width=##% for each of the <td> tags , but I'd like them to remain a fixed size just large enough so that no lines wrap.

I still haven't figured out how to specify a fixed size for the table.

<table border=1; max-height=100px; max-width=100px>

doesn't work for some reason , and neither does putting the max width and height in the div tag.

Matthew Leverton
Supreme Loser
January 1999
avatar

Half of the code you just wrote is incorrect.

Edgar Reynaldo
Member #8,592
May 2007
avatar

Stop mentally chanting html noob , and be specific about what's wrong and what isn't please. I only started learning html a few days ago.

Right now , I'm currently working off of Timorg's html code and it works to get the non table header rows to scroll , but the columns of the header row and the columns of the table rows don't match up for column widths.
Here's what I have :
sandbox3tablescroll.html
<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xlmns="http://www.w3.org/1999/xhtml">
<head>

<title>Welcome to Sandbox #3 , scrolling? tables !</title>
<meta name="keywords" content="sandbox, practice, lookheresearchengine" />

<style>
colgroup.scroller {
    overflow: scroller;
}
tbody tr td {}
</style>

<p>Scrolling tables , or are there?</p>
</head>

<body >


<table border=2;>

  <tr>
    <td>

      <table border=1;>
        <tbody>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
          </tr>
        </tbody>
      </table>

    </td>
  </tr>

  <tr>
    <td>
             
      <div style="max-height: 100px; overflow-y: scroll;">
        <table border=1>
          <tbody>
            <tr>
              <td>Row 2 Column 1</td>
              <td>R2C2</td>
              <td>Row 2 Column 3</td>
              <td>Row 2 Column 4</td>
              <td>Row 2 Column 5</td>
            </tr>
            <tr>
              <td>Row 3 Column 1</td>
              <td>Row 3 Column 2</td>
              <td>Row 3 Column 3</td>
              <td>Row 3 Column 4</td>
              <td>Row 3 Column 5</td>
            </tr>
            <tr>
              <td>Row 4 Column 1</td>
              <td>Row 4 Column 2</td>
              <td>Row 4 Column 3</td>
              <td>Row 4 Column 4</td>
              <td>Row 4 Column 5</td>
            </tr>
            <tr>
              <td>Row 5 Column 1</td>
              <td>Row 5 Column 2</td>
              <td>Row 5 Column 3</td>
              <td>Row 5 Column 4</td>
              <td>Row 5 Column 5</td>
            </tr>
            <tr>
              <td>Row 6 Column 1</td>
              <td>Row 6 Column 2</td>
              <td>Row 6 Column 3</td>
              <td>Row 6 Column 4</td>
              <td>Row 6 Column 5</td>
            </tr>
            <tr>
              <td>Row 7 Column 1</td>
              <td>Row 7 Column 2</td>
              <td>Row 7 Column 3</td>
              <td>Row 7 Column 4</td>
              <td>Row 7 Column 5</td>
            </tr>
          </tbody>
        </table>
      </div>
                 
    </td>
  </tr>
</table>


</body>


</html>
Timorg
Member #2,028
March 2002

The issue with the header not lining up with the body is to do with you haven't set the width of the cells.

I set the widths for all the cells, so that they would all be the same, so that the lined up, where in your example you have allowed them to use them to automatically size to fit the content, and you get the results you see.

As for having the headings and the div in a table, it keeps them aligned together and in a block, I possibly could have used a <div> to keep them together. But I am table addicted, I use them for everything.

You are getting inline CSS styles with HTML. HTML has...

<TABLE WIDTH=100 HEIGHT=200>

The parameters are in the form, name, and then an equals sign, then the value.

Where CSS goes into a style tag, and uses a ':' instead of the equals sign, and the parameters are separated by a ';'.

<TABLE WIDTH=100 HEIGHT=200 STYLE="name: value; name: another_value;">

But you probably already know that as you have your <STYLE> tags done right.

-Tim

____________________________________________________________________________________________
"c is much better than c++ if you don't need OOP simply because it's smaller and requires less load time." - alethiophile
OMG my sides are hurting from laughing so hard... :D

Edgar Reynaldo
Member #8,592
May 2007
avatar

Thanks for the clarification. The table now resizes properly for me.

Since I'm using your method , with two tables as the table data of 2 different table rows for the outer table , why doesn't it adjust the width of both rows (containing the two tables) to be the same though? If it was just a single table with two rows having different length text then the row widths would be adjusted to fit the longer data right?

I don't know how wide I need to make the rows , since this table is being built by a homemade C++ html file writer I am making. Maybe I could try and precalculate the maximum width by finding the longest string that will go into a cell but then how do I translate the number of characters into a pixel size? Does a 12pt font render 12 pixels wide?

Is there a way to force horizontal scrolling when the table isn't wide enough to prevent cell text wrapping?

Timorg
Member #2,028
March 2002

If both tables were 100% wide, the scrollbar takes up room, so the bottom table would be skinnier.

The outer table is only has two cells, one stacked on top of each other, the top table and bottom table are separate from each other, so they don't know how wide each others cells are. The same problem occurs with horizontal scrolling, the top table cells content (the table) has no idea of where the <DIV> has scrolled to.

I guess you could use javascript, get the values and apply them to the other parts of the text box, but that would be complicated, and I have no idea to go about that, and it might be very unresponsive.

As for calculating the width of a field of the cell widths, you could use a true type library, setup the font the page will use, and measure it. But fonts take up different amounts of pixel space depending on the screen resolution. A 10pt font on 1280x1024 takes up more pixel space than on a 1024x768 screen, so you will need a lib that can specify pixels as font size, and they need to interpret the pixels for font size in the same way as the browser, then to make it more painful, different browsers might interpret the heights differently.

on http://en.wikipedia.org/wiki/Point_(typography)
Scroll down to "Current DTP point system" to find more about the 'pt' system.

Also how large a 'pt' sized font is also dependent on the pixels per inch of the display. I think you can ignore it for this problem, cause I don't know if windowing systems (windows or linux based ones) bothers knowing about screen size. I hope someone can verify this.

Edit:

In firefox at least, you can only read the width of an object if you have set it, if you get the value and it isn't set, you get an empty string.

eg.
http://www.timorg.net/check_size.html

<HTML>
<BODY>
<TABLE BORDER=1 WIDTH=800>
<TR><TD NAME='blah'>Hello</TD></TR>
</TABLE>
<SCRIPT>
alert(document.getElementsByName('blah')[0].width);
</SCRIPT>
</BODY>
</HTML>

____________________________________________________________________________________________
"c is much better than c++ if you don't need OOP simply because it's smaller and requires less load time." - alethiophile
OMG my sides are hurting from laughing so hard... :D

Edgar Reynaldo
Member #8,592
May 2007
avatar

Okay , found an easier way.

<style>
td {width: (maxchar*14);font-size: 14px;}
</style>

'maxchar*14' will be replaced by the actual number when the html file gets written.

However , I still can't manage to make the table cells stop wrapping text when the table isn't wide enough. Is there a min-width property? Will that force the table to make a horizontal scrollbar if there is not enough room for the table? I don't mind if the window has to scroll , but I don't want the text to wrap. It looks bad and makes it harder to read.

Timorg
Member #2,028
March 2002

If you use &nbsp; instead of a space character, the text wont be broken onto a new line.

'&nbsp;' stands for Non Breaking Space.

As for multiplying the number of characters by the px size, probably doesn't give you the width of the string, I am pretty sure the px is the height not the width of a character. But if you pick a high enough value for the character width, it will probably have the result you want.

____________________________________________________________________________________________
"c is much better than c++ if you don't need OOP simply because it's smaller and requires less load time." - alethiophile
OMG my sides are hurting from laughing so hard... :D

Mordredd
Member #5,291
December 2004
avatar

I do not know much about HTML, but what about using frames? Would not this force the table to be scrollable?

Edgar Reynaldo
Member #8,592
May 2007
avatar

I used &nbsp; and it works wonderfully. Now when I set the width and height of the outer table , when it's too small a horizontal scroll bar appears. Nice!

Is there a way to set a text property so that in certain elements , all spaces are interpreted as non-breaking spaces without having to parse them in as such?

I don't know much about frames. I'll take a look at using one tomorrow , thanks for the suggestion Jacob.

Does anyone have any ideas how I can get the vertical scroll bar set outside the visible columns of the table so that the header columns and the row columns line up? I still have to set the <td> width to an approximate value so that the columns will line up nicely between the two rows of the outer table. After I figure that out should I try to set the width of the two inner tables or should I try to set the width of the two outer rows where the second one is wider by 20 pixels or so?

Matthew Leverton
Supreme Loser
January 1999
avatar

You should be using JavaScript like I originally suggested. All the other solutions have drawbacks. Sometimes you can live with them, but usually not.

Regarding your incorrect HTML, you didn't even copy/paste the examples correctly. So if you want to see what you are doing wrong, you should compare your snippets with the ones other people have provided. The biggest problem is that you are mixing HTML and CSS syntax up.

<table width="500" style="width: 500px;">

The HTML width has no units. It's just a number (or a percentage). CSS uses colon and semicolon separated values.

And the accepted style of modern day HTML is to lower case everything, to use quotes around all attributes, and to close all tags.

Fladimir da Gorf
Member #1,565
October 2001
avatar

Td elements have a nowrap attribute IIRC.

OpenLayer has reached a random SVN version number ;) | Online manual | Installation video!| MSVC projects now possible with cmake | Now alvailable as a Dev-C++ Devpack! (Thanks to Kotori)

Edgar Reynaldo
Member #8,592
May 2007
avatar

I don't know any javascript. Know any links to well-written tutorials/references?
Timorg helped correct me on my usage errors , and I'm cleaning them up. I'm sticking to writing style rules in the head section for the different tags for now. Thanks for the grammar tips. I retried the tips that you and Dustin provided but both failed according to the explanation I gave before. The method I'm using now encloses a normal table in two sets of div tags.

I still haven't been able to reliably set the width of a th or td cell.

I tried using a different approach , using method #1 from CSS Play - CSS scrolling tables [cssplay.co.uk] , and even though I copied the styles explicitly and used the same attributes for the different table tags , I can't get the columns of the header and the rows to synchronize widths without using position:relative; in the .outerdiv thead tr style definition but then the scroll bar moves the headers up and down as well as the tbody rows. I can't seem to get a strict cell width set for <td> and <th> tags. It adjusts the cell widths somewhat , but not to a fixed width.

Here's the html code I am using right now :
sandbox6tablescroll-cssplayA.html
<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xlmns="http://www.w3.org/1999/xhtml">
<head>

<title>Welcome to Sandbox #6 , tables scrolling yet? !</title>
<meta name="keywords" content="sandbox, practice, lookheresearchengine" />


<style>
.outerdiv {
  position:relative;
  padding:4em 0 3em 0;
  width:54em;
  background:#eee;
  margin:0 auto 3em auto;
}
.innerdiv {
  overflow:auto;
  width:54em;
  height:5em;
  background:#eee;
}
.outerdiv table caption {
  position:absolute;
  width:51.7em;
  text-align:center;
  top:0;
  left:0;
  height:1.5em;
  background:#697210;
  border:0.1em solid #fff;
  color:#fff;
}
.outerdiv thead tr {
  position:absolute;
  top:1.5em;
  height:1.5em;
  left:0;
}
.outerdiv tfoot td {
  position:absolute;
  width:51.5em;
  text-align:center;
  background:#f0c992; 
  border:0.1em solid #000;
  color:#000;
  bottom:0;
  left:0
}
.outerdiv th , outerdiv td {
  width:10em; 
  text-align:left;
}
.outerdiv th {
  background:#724a10; 
  color:#fff;}
  .outer .dk {background:#fff;
}

</style>

<p>Scrolling tables , or are there?</p>
<hr style="width:100%; height:10px; color:green; background-color:green;"/>
</head>

<body >

<div class="outerdiv">
  <div class="innerdiv">
    <table summary="Trying to make the table look nice , work with me here">
                     
      <caption>Sample table to test scroll abilities</caption>
                  
      <thead>
        <tr>
          <th scope="col">Column 1</th>
          <th scope="col">Column 2</th>
          <th scope="col">Column 3</th>
          <th scope="col">Column 4</th>
          <th scope="col">Column 5</th>
        </tr>
      </thead>
                
      <tfoot>
        <tr>
          <td colspan="5">Are the scroll bars working?</td>
        </tr>
      </tfoot>
                   
      <tbody>
        <tr class="dk">
          <th scope="row">Row 2 Column 1</th>
          <td>R2C2</td>
          <td>Row 2 Column 3</td>
          <td>Row 2 Column 4</td>
          <td>Row 2 Column 5</td>
        </tr>
        <tr>
          <th scope="row">Row 3 Column 1</th>
          <td>Row 3 Column 2</td>
          <td>Row 3 Column 3</td>
          <td>Row''3''Column''4</td>
          <td>Row 3 Column 5</td>
        </tr>
        <tr class="dk">
          <th scope="row">Row 4 Column 1</th>
          <td>Row 4 Column 2</td>
          <td>Row 4 Column 3</td>
          <td>Row 4 Column 4</td>
          <td>Row 4 Column 5</td>
        </tr>
        <tr>
          <th scope="row">Row 5 Column 1</th>
          <td>Row 5 Column 2</td>
          <td>Row 5 Column 3</td>
          <td>Row 5 Column 4</td>
          <td>Row 5 Column 5</td>
        </tr>
        <tr class="dk">
          <th scope="row">Row 6 Column 1</th>
          <td>Row 6 Column 2</td>
          <td>Row 6 Column 3</td>
          <td>Row 6 Column 4</td>
          <td>Row 6 Column 5</td>
        </tr>
        <tr>
          <th scope="row">Row 7 Column 1</th>
          <td>Row 7 Column 2</td>
          <td>Row 7 Column 3</td>
          <td>Row 7 Column 4</td>
          <td>Row 7 Column 5</td>
        </tr>
                    
      </tbody>
                  
    </table>
  </div>
</div>

</body>


</html>
Even if I adjust the width in the
.outerdiv th , .outerdiv td {
  width:10em;
  text-align:left;
}
section , it doesn't adjust all the cell widths to the same amounts.

Well , I just tried this last version in IE7 and it renders everything with the column widths adjusted to the same amount for all the rows. It doesn't render them exactly according to the width suggested , but it does a lot better than Mozilla's doing right now. How's FireFox look? I don't have it on this machine yet.

Do you see any errors in the html I'm using? I can't see any styles or attributes that I left out for any of the tags that I used. I checked over the two css files linked to in the source for the CSSplay scroller page and nothing there would affect any of the tags in what I used as far as I know. I don't understand why the CSSplay scrolling tables page renders both tables perfectly but it won't render this one right when I'm using the exact same style rules and data structure?

Any other suggestions?

- Fladimir -
How would I use the no wrap attribute? Would it work for th tags as well?
<style>
td {wrap:none; word-wrap;no ; ??:??;}
</style>
- Append -
I tried altering the dtd to match what the website was using , but it didn't fix or change anything. I was using XHTML 1.0 Transitional and the web page was using Strict. No change though.

- Append 2 -
I noticed that if all of the table row's first column tags are <td> and not <th> that then their widths don't match up with the first thead column. As soon as one is changed to use the <th> tag then it adjust the width of the cells in that column to match the header (or itself maybe). What attribute does the <th> tag have that the <td> one doesn't? The only difference in style attributes is that the <th> tag has some color attributes associated with it. Why would that matter? Is it just some intrinsic property of the <th> tag?
Dustin Dettmer
Member #3,935
October 2003
avatar

I went ahead and uploaded an idea I had. Apparently its only IE5+ but it seems ideal.

http://dustytech.com/examples/scrollytable.php

I can't get rid of the horizontal scroll-bar on FF. The page is wiki-editable so if someone else has a solution please update it.

Fladimir da Gorf
Member #1,565
October 2001
avatar

In HTML: <td nowrap></td>
In XHTML: <td nowrap="nowrap"></td>

Though I'm not sure if it's in strict XHTML.

OpenLayer has reached a random SVN version number ;) | Online manual | Installation video!| MSVC projects now possible with cmake | Now alvailable as a Dev-C++ Devpack! (Thanks to Kotori)

Matthew Leverton
Supreme Loser
January 1999
avatar

Quote:

I went ahead and uploaded an idea I had. Apparently its only IE5+ but it seems ideal.

It looks like the same thing I suggested... But I don't think anything except Firefox supports that. I know IE7 doesn't.

And even on Firefox, the scrollbars are inside the table (which is reasonable) but the headers don't know that (which is unreasonable) so you get horizontal scrollbars.

Edgar Reynaldo
Member #8,592
May 2007
avatar

- Fladimir -
Nice , I added in the nowrap:nowrap; attribute , and now all the table row columns are lining up well. However , size changes still don't seem to affect the <thead><tr><th> column titles to the same degree as the <tbody><tr><td> cells.

.outerdiv th , .outerdiv td {
  nowrap:nowrap;
  width:250px; 
  text-align:left;
}

I also fixed a missing . dot class prefix before the outerdiv td in there.
Tweaking outerdiv , innerdiv , caption , and footer widths makes it nicer , but I still don't know how to make the column widths be a fixed non-negotiable value.

Other than that html code is same as before and now produces this (using XHTML 1.0 Transitional) :
sandbox6tablescroll-cssplayA.html
{"name":"594314","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/6\/2\/6248a699e023a49faff4f4e76496a97e.jpg","w":867,"h":472,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/6\/2\/6248a699e023a49faff4f4e76496a97e"}594314

So it only looks nice when the column widths for <th> and <td> are tweaked along with making the outer and inner div style attributes wide enough for all the columns. If there's not enough room in the div for all the columns then they get smushed together regardless of having the nowrap:nowrap; attribute for cells set.

Something else strange is that when I make the <thead><tr> tags use position:relative; instead of absolute that then the header row moves inside the inner div out of the outer div. After that the column widths auto adjust but then the headers and table rows scroll together though.

- Dustin -
Looking pretty good on the wiki , I copied out the code and made an html file out of it and it's working pretty well on SeaMonkey. It's sure a lot nicer looking than a bunch of <div> wrappers and massive styling code. I must have had too much extra junk in my html file when I tried you and Matthew's solutions last time. I took out the style attributes in the <tbody> tag and tried out the <colgroup span="2" class="scroller"></colgroup> again but I couldn't get any variation of colgroup to implement a scroller. I can't seem to get rid of the horizontal scroll bar on the wiki code either.

Yeah , IE7 doesn't like the wiki version. It makes it all huge with no scrollbars.

BAF
Member #2,981
December 2002
avatar

Seamonkey is the ugliest piece of shit ever. Looks too much like Netscape.

Edgar Reynaldo
Member #8,592
May 2007
avatar

And Firefox is soooo special.
I'll ignore the SeaMonkey comment as now I don't have to add this onto the end of my last post. - Edit - Besides , that was the classic look for Mozilla , I just hadn't set my theme to Modern yet. :P
Modern theme screenpic below.


I googled around and I found a better solution for preventing line wrapping in data cells. Use <nobr></nobr> tags around the div or table. As long as it has the overflow attribute set to auto or scroll the cells will stay in the boundaries of the table and scroll bars will appear. I also found this style attribute , but haven't tested it : style="white-space:nowrap;". I haven't found a solution to the problem of including the headers and rows in the same div or table without making the header row get scrolled as well. The best solution I've found so far is to set the width's of the <thead><tr> tag to the same width as the <tbody> - 1em for the scrollbar. Even then , if you don't set the width of the header row to the combined width of the table row's cells then you get a horizontal scrollbar and it goes out of sync with the headers. This shouldn't be so complicated.

Quote:
Put the table in a div that has a style of overflow: auto; and a height.
Check.
Quote:
The next best thing is to make a separate table for the header and use Ryans trick for the inner/scrolling table.
Check.
Quote:
You're best off making a JS function that splits tables into two. It's not very hard.
Off to learn Javascript.

Basically I started over with a fresh table , split it into two tables , one for the headers and one for the rows of the table body , with each table in its own div and a div wrapper for it all to make the background look a little better. Used <nobr> tags around the two tables and overflow:auto; in the div for the table body. Manually adjusting the widths of the components is obnoxious though and that's where the javascript should finish the job by setting the appropriate widths of the header row , and the div for the table body. It looks good in SeaMonkey and in IE7 the table rows aren't quite as wide for some reason but looks decent anyway.

Here's the latest incarnation of the scroll table :
NobrDivScrollTable.html
<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xlmns="http://www.w3.org/1999/xhtml">
<head>

<title>Nobr Div Scroll Table - Welcome to Sandbox #2 !</title>
<meta name="keywords" content="sandbox, practice, lookheresearchengine" />

<style>
.theaderdiv {
  position:relative;
  width:41.7em;
  border:3px solid cyan;
  background:#eee;
  height=1.5em;
  margin:2em 2em auto 2em;
}
.tbodydiv {
  position:relative;
  overflow:auto;
  width:42.7em;
  border:3px solid cyan;
  background:#eee;
  height:10em;
  margin:auto 2em 2em 2em;
}
.tbackgrounddiv {
  position:relative;
  width:47em;
  background:#990099;
  border:5px #663399 solid;
}
thead {
}
tbody {
}
.centered {
  text-align:center;
}
th , td {
  border:1px black solid;
  width:30em;
}
</style>

<p>Making scrolling tables using nobr , div , and overflow</p>
</head>

<nobr>

<div class="tbackgrounddiv">

<div class="theaderdiv">
<table style="cellpadding:4; cellspacing:4; border:1 solid black;">
 <thead>
  <tr>
   <th>Header Blah</th>
   <th>Header Blah</th>
  </tr>
 </thead>
</table>
</div>

<div class="tbodydiv">

<table style="cellpadding:4; cellspacing:4; border:1 solid black; width:40em;">
 <tbody>
  <tr>
   <td>Data Data Data Data Data Data Data Data Data Data</td>
   <td class="centered">DataDataDataDataDataDataDataDataDataData</td>
  </tr>
  <tr>
   <td>DataDataDataDataDataDataDataDataDataData</td>
   <td class="centered">DataDataData</td>
  </tr>
  <tr>
   <td>Data</td>
   <td class="centered">DataDataDataDataDataDataDataDataDataData</td>
  </tr>
  <tr>
   <td>DataDataDataDataDataDataDataDataDataData</td>
   <td class="centered">Data Data Data Data Data Data Data Data Data Data</td>
  </tr>
  <tr>
   <td>DataDataDataDataDataDataDataDataDataData</td>
   <td class="centered">DataDataDataDataDataDataDataDataDataData</td>
  </tr>
  <tr>
   <td>DataDataDataDataDataDataDataDataDataData</td>
   <td class="centered">DataDataData</td>
  </tr>
  <tr>
   <td>Data</td>
   <td class="centered">DataDataDataDataDataDataDataDataDataData</td>
  </tr>
  <tr>
   <td>DataDataDataDataDataDataDataDataDataData</td>
   <td class="centered">DataDataDataDataDataDataDataDataDataData</td>
  </tr>
  <tr>
   <td>DataDataDataDataDataDataDataDataDataData</td>
   <td class="centered">DataDataDataDataDataDataDataDataDataData</td>
  </tr>
  <tr>
   <td>DataDataDataDataDataDataDataDataDataData</td>
   <td class="centered">DataDataDataDataDataDataDataDataDataData</td>
  </tr>
  <tr>
   <td>DataDataDataDataDataDataDataDataDataData</td>
   <td class="centered">DataDataData</td>
  </tr>
  <tr>
   <td>Data</td>
   <td class="centered">DataDataDataDataDataDataDataDataDataData</td>
  </tr>
 </tbody>
</table>

</div>

</div>

</nobr>

</body>


</html>
And a nice little picture of the table in SeaMonkey for BAF.
jpg;820;519;160;101

Anyone care to give me a brief introduction how to interface javascript functions with html objects?
BAF
Member #2,981
December 2002
avatar

It's a little better, but I still hate seamonkey. I tried it out and went back to FF.

And I've been running FF3b2 exclusively since I installed Vista. More memory bugs fixed, their new garbage collector works quite well. Plus it doesn't slowly degrade until having to be restarted. I've had it open with quite a few tabs for... at least a week and it's locked pretty much at 265MB (doesn't go up or down much unless I open/close tabs).

 1   2   3 


Go to: