www.webdeveloper.com
Results 1 to 9 of 9

Thread: how could I make a table cell scroll?

  1. #1
    Join Date
    Nov 2007
    Posts
    42

    Exclamation how could I make a table cell scroll?

    Hi,

    how could I make a table cell scroll when its filled with too much text?

    I also want to put buttons to make the table cell scroll instead of a normal scroll bar.

    How do I do that in html and/or javascript and/or CSS?

    Any help will be appreciated
    Thanks

    David

  2. #2
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    I think you can set the specific table cell to overflow:auto via CSS, but it wouldn't surprise me if I'm off on that, haven't had much experience or need to do that.
    Ryan Butler

    Ryan Butler.org

  3. #3
    Join Date
    Jan 2008
    Posts
    66
    Quote Originally Posted by ryanbutler
    I think you can set the specific table cell to overflow:auto via CSS, but it wouldn't surprise me if I'm off on that, haven't had much experience or need to do that.
    I hear ya. It turns out this doesnt work, I just tried it. I also tried putting a div around the contents of the TD and setting the overflow, but that didnt work.

    I dont know why a td needs to scroll, but im 90% sure thats impossible. Scrollbars only appear when an element has more information than it can hold. Tables automatically adjust its height and width to fit the content inside of it, and based on the few tests I just performed now, it seems to overwrite CSS width and height and even the table HTML width / height. If this is the case, the "do I need a scrollbar" check will always return false for content within tables.

    Never knew that, then again, when I learned CSS a while ago, I stopped using tables.

  4. #4
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    That's odd, it must be a specific web page problem, because querying Google affirms my guess:

    http://www.htmlcodetutorial.com/help...us__index.html
    Ryan Butler

    Ryan Butler.org

  5. #5
    Join Date
    Nov 2007
    Posts
    42
    I agree it should work but i just cant get it to work either! strange. I'll sit and work it out

    David

  6. #6
    Join Date
    Jan 2008
    Posts
    2
    You could just put <textarea>
    tags in there and if you want change the background of it.

  7. #7
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Except a textarea won't render HTML if that's a requirement.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  8. #8
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I haven't been following this thread so maybe I have the wrong idea here, -but why not insert a scrolling-DIV inside of a TD cell?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title></title>
    <style type="text/css">
    @charset "utf-8";
    * {border:0; padding:0; margin:0;}/* Set everything to "zero" */

    html, body {min-height:100%; /*for compliant browsers*/
    padding-bottom:25px; /* IE does not understand "margin-bottom" on BODY, so padding-bottom instead*/
    font:x-small Arial, Verdana, sans-serif;voice-family: "\"}\"";voice-family:inherit;font-size:small;/*for IE 5.5 */
    font-size:100%; line-height:1.125em;}

    #wrapper p {color:black;}
    /*non-content: e.g., -navigation lists, etc. Slightly smaller than content text {font-size:0.75em;} */

    html>body {font-size:small; height:auto;/* Assist IE6 and earlier, 100% height */
    font-size: small; voice-family: "\"}\"";voice-family: inherit; font-size: medium}
    /* Assist IE rendering height, keyword-font sizes, etc. */

    #menu ul li {float: left; /* cure IE5.x "whitespace in lists" problem */width: 100%;}
    #menu ul li a {height: 1%; /* make links honour display: block; properly */}

    #wrapper {min-height:100%; overflow:hidden;} /* 100% height for compliants, enwraps content*/
    * html #wrapper {height:100%;}/* and feed IE what it needs */

    html, body, p, th, td, li, dd, dt { font:0.875em Arial, Helvetica, verdana sans-serif;}
    h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, 'times new roman', sans-serif;}

    h1 { font-size: 2.0em;}
    h2 { font-size: 1.5em;}
    h3 { font-size: 1.2em;}
    h4 { font-size: 1.0em;}
    h5 { font-size: 0.9em;}
    h6 { font-size: 0.8em;}/* Defined default Header sizes*/

    a:link, a:visited, a:focus, a:hover, a:active {background-color:none;}/*s.508 Accessibility*/

    a:link {color: #00f;}
    a:visited {color: #009;}
    a:focus: {color: #06f;}/*for non-mouse pointers: e.g. "hotkeys", etc. s.508*/
    a:hover {color: #06f;}
    a:active {color: #0cf;}

    </style>

    <script type="text/javascript"><!--
    // -->
    </script>
    <link rel="shortcut icon" href="favicon.ico" /><!-- path to your favicon -->
    </head>
    <body>
    <div id="wrapper">

    <h1 style="font-size:1.5em; width:600px; margin:10px auto 10px auto;">TABLE, with 3 TDs. TD#2 contains a scrolling DIV</h1>
    <table summary="Scrolling DIV in a TD-cell" style="width:600px; height:auto; margin:25px auto; border:1px solid black;">
    <tr>
    <td bgcolor="yellow">Top TABLE-DATA Row</td>
    </tr>

    <tr>
    <td bgcolor="#69a61d">
    <div style="width:458px; height:50px; padding:10px 10px 10px 20px; margin:5px 0 5px 0; border:1px solid red;margin:0 auto; overflow-y:scroll; background-color:white;">
    <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and
    I will give you a complete account of the system, and expound the actual teachings of the great explorer of
    the truth, the master-builder of human happiness.</p>

    <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how
    to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
    loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances
    occur in which toil and pain can procure him some great pleasure.</p>

    <p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some
    advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that
    has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p>

    <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized
    by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that
    are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is
    the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish.</p>

    <p>In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best,
    every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty
    or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.
    The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure
    other greater pleasures, or else he endures pains to avoid worse pains.
    </p>
    </div>
    </td>
    </tr>


    <tr>
    <td bgcolor="yellow">Bottom TABLE-DATA Row</td>
    </tr>
    </table>



    </div>
    </body>
    </html>
    This meets the criterion of the 'scrolling TD', -not that I'd use a TABLE this way, but TABLE layout here does allow for a TD to contain a scrollable DIV. This works in IE and Fx, and looks identical...
    I build for: Firefox and tweak for IE

  9. #9
    Join Date
    Mar 2011
    Posts
    1
    scrollable div is about the only easy way to go. To fix the problem with td auto fitting to the size of the contents, just give the content a fixed size. So in you need to set the height of the div and then set it to scroll.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles