Table Overflow Scrolling Issue

Discussion in 'HTML & Website Design' started by lukefowell89, Jan 19, 2011.

0
  1. #1
    I have a table, which is contained within a div with (overflow: scroll) set. The table has 3 columns which total to a width of 540px. The Div that the table is contained within is 500px, therefore I would like the div containing the table to scroll horizontally to show all of the table.

    The problem is that the table currently resizes all the columns in proportion to the size of the div to fit the available space. I would prefer them to stay set at the width I have ask them to be. So that they dont resize to fit.

    How do I do this? CSS style? table option?

    Thanks
     
    lukefowell89, Jan 19, 2011 IP
  2. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #2
    Set the width for TD using css.
     
    radiant_luv, Jan 19, 2011 IP
  3. lukefowell89

    lukefowell89 Peon

    Messages:
    182
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I have done that, It doesnt work though which is why I am posting. I was wondering if there was a way to stop the columns from auto resizing to fit?
     
    lukefowell89, Jan 19, 2011 IP
  4. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #4
    Post a link to the page or atleast the code to check.
     
    radiant_luv, Jan 19, 2011 IP
  5. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #5
    This code seems to work for me, but without looking at your code I can't really be sure if it applies to your problem:

    

<!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=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div style="width:500px;border:1px dashed #ccc;padding:1px;overflow: scroll;">
	<table width="540px" style="background:#f1f1f1;">
  	<tr>
    	<td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
	</table>
</div>
</body>
</html>
    HTML:
     
    GWiz, Jan 19, 2011 IP