webdevRefinery Forum: Set a table columns width - webdevRefinery Forum

Hide message

Show message

Welcome!

Mean coders suck. Learn from nice ones.

Join up (it's free!) whether you're just starting out or you're crazy advanced. Get tips from people who know what they're talking about, without being treated like the playground smelly kid. Because seriously, your school classes didn't teach you anything you wanted to know.

Hide message

View New Content
Pick a background

Cartoon Clouds Mountains Sunrise Clouds Green Clouds None

Page 1 of 1

You cannot start a new topic
You cannot reply to this topic

Rate Topic:

Hermes

Group: Members
Posts: 77
Joined: 02-May 11

Posted 09 March 2012 - 01:32 PM (#1)

Set a table columns width

Hi,

I tried to do it by adjusting the <td> width:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample Page</title>
<style type="text/css">
div {width:100%; overflow:auto;}
table, td {border:1px solid #000;}
td {width:1000px;}
</style>
</head>
<body>
<div>
<table>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
<tr>
<td>Forth cell</td>
<td>Fifth cell</td>
<td>Sixth cell</td>
</tr>
</table>
</div>
</body>
</html>

But it didn't work.

Many thanks for any help!
Mike

arronhunt

I'm a httpster

Group: Moderators
Posts: 3398
Joined: 09-March 10
LocationLos Angeles, CA
Expertise:HTML,CSS,Javascript,Graphics,Flash

Posted 09 March 2012 - 01:43 PM (#2)

It works when I try it. Why do you have your td's width at 1000px? That makes your rows 3000px wide which is larger than pretty much any display.

Edit: Also, indent your code!

Spoiler

<!DOCTYPE HTML5>
<html>
  <head>
    <title>Sample Page</title>
    <style type="text/css">
      div {width:100%; overflow:auto;}
      table, td {border:1px solid #000;}
      td {width:100px;}
    </style>
  </head>
<body>
  <div>
    <table>
      <tr>
        <td>First cell</td>
        <td>Second cell</td>
        <td>Third cell</td>
      </tr>
      <tr>
        <td>Forth cell</td>
        <td>Fifth cell</td>
        <td>Sixth cell</td>
      </tr>
    </table>
  </div>
</body>
</html>

DO NOT OPEN THIS

Spoiler

Quinn

More pew-pew, less QQ

Group: Members
Posts: 1307
Joined: 08-March 10
LocationPalmyra, PA, USA
Expertise:HTML,PHP,Javascript

Posted 09 March 2012 - 01:52 PM (#3)

arronhunt, on 09 March 2012 - 01:43 PM, said:

It works when I try it. Why do you have your td's width at 1000px? That makes your rows 3000px wide which is larger than pretty much any display.

I'm assuming that was to see if anything was actually changing - for testing purposes.

<Imp> [F3ar 40]  [PWNbear 17]  [magik 15]  [dissident 10]  [mark 7]

Kyek, on 07 February 2011 - 07:11 AM, said:

Though anyone who thinks Europe is a country should be smacked in the face. By a train.

Hermes

Group: Members
Posts: 77
Joined: 02-May 11

Posted 09 March 2012 - 02:15 PM (#4)

Quinn, on 09 March 2012 - 01:52 PM, said:

I'm assuming that was to see if anything was actually changing - for testing purposes.

Exactly. Even if you set it to 2000px, the cells width doesn't change and the srollbar doesn't appear.

NeilHanlon

Group: Members
Posts: 884
Joined: 08-July 10
LocationRowley, Massachusetts
Expertise:HTML,CSS,PHP,Java,Graphics

Posted 09 March 2012 - 02:18 PM (#5)

http://jsfiddle.net/Z3Rs2/

arronhunt

I'm a httpster

Group: Moderators
Posts: 3398
Joined: 09-March 10
LocationLos Angeles, CA
Expertise:HTML,CSS,Javascript,Graphics,Flash

Posted 09 March 2012 - 02:53 PM (#6)

Neil your solution didn't change anything.

Hermes if you want the scroll bar to appear, simple change

width: 1000px

min-width: 1000px;

http://jsfiddle.net/Z3Rs2/1/

DO NOT OPEN THIS

Spoiler

NeilHanlon

Group: Members
Posts: 884
Joined: 08-July 10
LocationRowley, Massachusetts
Expertise:HTML,CSS,PHP,Java,Graphics

Posted 11 March 2012 - 07:47 PM (#7)

It wasn't a solution - he was saying that is was still not working - I was showing him that it was.

arronhunt

I'm a httpster

Group: Moderators
Posts: 3398
Joined: 09-March 10
LocationLos Angeles, CA
Expertise:HTML,CSS,Javascript,Graphics,Flash

Posted 11 March 2012 - 09:14 PM (#8)

NeilHanlon, on 11 March 2012 - 07:47 PM, said:

It wasn't a solution - he was saying that is was still not working - I was showing him that it was.

I know, but it wasn't working in the fiddle you posted.

DO NOT OPEN THIS

Spoiler

NeilHanlon

Group: Members
Posts: 884
Joined: 08-July 10
LocationRowley, Massachusetts
Expertise:HTML,CSS,PHP,Java,Graphics

Posted 11 March 2012 - 09:31 PM (#9)

arronhunt, on 11 March 2012 - 09:14 PM, said:

I know, but it wasn't working in the fiddle you posted.

Yes it was...

arronhunt

I'm a httpster

Group: Moderators
Posts: 3398
Joined: 09-March 10
LocationLos Angeles, CA
Expertise:HTML,CSS,Javascript,Graphics,Flash

Posted 11 March 2012 - 10:14 PM (#10)

NeilHanlon, on 11 March 2012 - 09:31 PM, said:

Yes it was...

In the fiddle you posted, the columns stretch dynamically with the size of the window. The OP didn't want this, he wanted them to be a definitive width (ex: 1000px) and overflow horizontally.

DO NOT OPEN THIS

Spoiler