CSS Table Issue / Dynamic Width

Question

I'm having issues getting my table to work. I really need to figure out how to use divs more, but right now, I just need it to work.

Here is what I'm doing.. i have a single table 3 column table

Column 1 contains a static text actually says "Select Account"
Column 2 contains a header title
Column 3 contains the select account name

Column 1 has a static width of 220px
Column 2 needs the header to be centered in middle of screen
Column 3 needs to grow depending on size of text

Table is 100% across screen.

Can't seem to figure out how to get it to work.. Column 1 works fine.. column 3 i have centered right, took out width, but middle column wont center correctly...

Any ideas? Maybe a way to do this using a div? Reason I used table is because if browser is small, don't want columns to fall under each other like they do with divs

Sample Code:

<table style="width: 100%" border="1">
  <tr>
    <td style="width: 220px;">
       <span>Please Select Your Account</span>
    </td>
    <td valign="top" align="center">
       <span>HeaderTitle(Centered)</span>
    </td>
    <td align="right">
      <span>This is a really long account name need to keep dynamic</span>
    </td>
  </tr>
</table>

For those who need it.. http://jsfiddle.net/j5C3z/6/

mylesagray · Accepted Answer · 2011-02-10 17:44:32Z

4

Please dont use f$%&*(*g tables for layout, If you put up an example of your code I can convert it to a div layout for you and explain more thoroughly...

Fixed as DIV layout: http://jsfiddle.net/Mutant_Tractor/j5C3z/2/

edited Feb 10, 2011 at 17:44

answered Feb 10, 2011 at 17:16

mylesagray

8,8897 gold badges50 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

jaekie Over a year ago

I know what you mean, I hate using tables, but can never seem to get them to work correctly as divs, I'd love any help you can give.. added HTML

Brad Christie Over a year ago

@MylesGray: 2nded, I'm always up for a lesson in DIV management instead of tables. I seem to have difficulty with getting a DIV to layout uniformly across all browsers. (and float:left will be the death of me, guaranteed)

mylesagray Over a year ago

@BradChristie and @LeeHull Check JSFiddle above

Brad Christie Over a year ago

@MylesGray: Kind of loses that "expandable fluid layout" though, doesn't it?

mylesagray Over a year ago

Not really, If you resize the browser window NOW it will work just as a table.

|

Collectives™ on Stack Overflow

CSS Table Issue / Dynamic Width

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related