SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    making horizontal scrollbar to be shown in a table cell

    Code:
    <head>
    <title>wide cell</title>
    <style type='text/css'> 
     
    </style>
     
    </head>
     
    <body>
     
    <table cellpadding='0' cellspacing='0' border='0'>
     
    <tr>
    <td>1111111111 2222222222 3333333333 4444444444 5555555555 6666666666 7777777777 8888888888 9999999999 0000000000 1111111111 2222222222 3333333333 4444444444 5555555555 6666666666 7777777777 8888888888 9999999999 0000000000 1111111111 2222222222 3333333333 4444444444 5555555555 6666666666 7777777777 8888888888 9999999999 0000000000 1111111111 2222222222 3333333333 4444444444 5555555555 6666666666 7777777777 8888888888 9999999999 0000000000 
    </td>
    </tr>
    </table>
     </body>
    </html>
    I have the code above at http://dot.kr/x-test/tree3.cfm
    According to the width resolution of the browser, the page cut the end of the right and put it the next line although there is no <br> tag in the table cell.

    I like to make it the horizontal scroll bar to be shown and all text in the table cell to be spread widely in a line.

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    set a width in the td.
    Ryan B | My Blog | Twitter

  3. #3
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    td {
      white-space: nowrap;
      }
    Further, note this bit:
    Code:
    <tr>
    <td style="overflow: auto; white-space: nowrap; width: 300px;">1111111111 2222222222 3333333333 4444444444 5555555555 6666666666 7777777777 8888888888 9999999999 0000000000 1111111111 2222222222 3333333333 4444444444 5555555555 6666666666 7777777777 8888888888 9999999999 0000000000 1111111111 2222222222 3333333333 4444444444 5555555555 6666666666 7777777777 8888888888 9999999999 0000000000 1111111111 2222222222 3333333333 4444444444 5555555555 6666666666 7777777777 8888888888 9999999999 0000000000 </td>
    <td>
    <div style="overflow: auto; width: 300px; white-space: nowrap;">1111111111 2222222222 3333333333 4444444444 5555555555 6666666666 7777777777 8888888888 9999999999 0000000000 1111111111 2222222222 3333333333 4444444444 5555555555 6666666666 7777777777 8888888888 9999999999 0000000000 1111111111 2222222222 3333333333 4444444444 5555555555 6666666666 7777777777 8888888888 9999999999 0000000000 1111111111 2222222222 3333333333 4444444444 5555555555 6666666666 7777777777 8888888888 9999999999 0000000000 </div>
    </td>
    </tr>
    Note where the scroll bar occurs. A table cell always expands to hold its content, so the first cell does not stay at 300px, and scrolling occurs on html, not the cell. The second cell has a normal block element, so is width constrained and and has its own scroll bar.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials


Bookmarks

Posting Permissions

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