CSS table custom width

Question

I've been recently working on a simple web page. I would like to place almost all style info in the CSS file. The main layout of the page is a table. I looks like this:

<body>
<table class="glowna">
<tr>
  <td colspan="2">...</td>
</tr>
<tr>
  <td id="glowna_top" colspan="2">
    <ul class="menu_gorne">
      <li>..</li>
    </ul>
  </td>
</tr>
<tr>
  <td id="glowna_menu_lewe">
    <ul class="menu_lewe">
      <li>...</li>
    </ul>
  </td>
  <td id="glowna_main">
      ...
  </td>
</tr>
</table>
</body>

and the CSS is like:

ul.menu_lewe, ul.menu_gorne {
  display:block; list-style:none;margin:0;}
ul.menu_lewe { 
  width:200px; padding:2px 20px 2px 2px;
  background-color:#9ce;border:none; vertical-align:top;}
ul.menu_lewe li { 
  border-bottom:1px solid #9ce; }
ul.menu_lewe a:link, ul a:visited { 
  display:block;width:176px;text-decoration:none;padding:7px;font-  weight:bold;background-color:#27c;color:#def;border-right:10px solid #25b;border-left:5px solid #25b; }
ul.menu_lewe a:hover { 
  width:176px;background-color:#28e;color:#fff;border-right:20px solid #26d; }
ul.menu_gorne { 
  position:absolute; }
ul.menu_gorne li { 
  float:left;padding:2px 2px 2px 2px;background-color:#9ce;border:none; }
ul.menu_gorne a:link, ul a:visited { 
  text-decoration:none;display:block;width:200px;text-align:center;padding:5px 0;font-weight:bold;background-color:#27c;color:#def;border-top:10px solid #25b; }
ul.menu_gorne a:hover { 
  background-color:#28e;color:#fff;border-top:20px solid #26d; }
ul.lista_dostawcow {
  width:800px;}
table.glowna { 
  background-color:#9ce;table-layout:fixed;width:1024px;margin-left:auto;margin-right:auto; }
td#glowna_top { 
  height:55px; vertical-align:top;}
td#glowna_main { 
  width:824px; text-align:left;}
td#glowna_menu_lewe { 
  width:200px;}

The problem is:
1. that even I set all the widths I still get table cells: "glowna_menu_lewe" and "glowna_main" divided 50%:50%. I want cell "glowna_menu_lewe" to be only 200px or sth near and the other one may fill the rest of space.

2. I would like to place list "menu_lewe" on top of its cell. Now it is vertically centered even that I set the verical-align attribute to top.

Sorry for posting so much code but I didn't know what may be causing the problem.

Is there a reason you are using tables? Tables in main layout situations are outdated and divs are common practice now... And I know this would be really simple with no problems with divs — Andy
– Andy, Commented Nov 11, 2012 at 14:53
@Andy Not realy. To be honest I have never done it using divs and that is why i use tables. But if you know how to do it using divs ,then please tell me and I'll try. — Sayid
– Sayid, Commented Nov 11, 2012 at 14:58
There's nothing wrong with table layouts if your still living in 1980's : Here's a crash course on designing with divs : barelyfitz.com/screencast/html-training/css/positioning — Riaan Walters
– Riaan Walters, Commented Nov 11, 2012 at 15:09
Honestly I don't get the table hate. Sure it wasn't "meant" to be used for layout, but let's be honest, column layouts in CSS requires an absurd amount of work (or a template). The whole point was to make pages smaller, more portable, and more maintainable, yet the table is more consistent and more wildly supported than the CSS that turns nested DIV tags into a grid, and it certainly takes less code and is easier to maintain using a simple table. — ChronoFish
– ChronoFish, Commented Jan 29, 2013 at 3:24

CooL i3oY · Accepted Answer · 2012-11-11 16:05:58Z

1

1 - Change that :

table.glowna { 
  background-color:#9ce;
  table-layout:fixed;
  width:1024px;
  margin-left:auto;
  margin-right:auto; 
}
td#glowna_main { 
  width:824px;
  text-align:left;
}

to this :

table.glowna { 
  background-color:#9ce;
  width:1024px;
  margin-left:auto;
  margin-right:auto;
}
td#glowna_main { 
  text-align:left;
}

2- use valign="top" attribute to td tag instead of vertical-align:top;

edited Nov 11, 2012 at 16:05

answered Nov 11, 2012 at 15:08

CooL i3oY

8001 gold badge9 silver badges26 bronze badges

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

1 Comment

CooL i3oY Over a year ago

@Sayid answer updated. remove table-layout:fixed; from table.glowna

Collectives™ on Stack Overflow

CSS table custom width

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related