making horizontal scrollbar to be shown in a table cell

**dotJoon** · Jan 16, 2010 18:47

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.

**rguy84** · Jan 16, 2010 18:50

set a width in the td.

**gary.turner** · Jan 16, 2010 18:53

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

User Tag List

Thread: making horizontal scrollbar to be shown in a table cell

Thread Tools

Display

making horizontal scrollbar to be shown in a table cell

Bookmarks

Bookmarks

Posting Permissions