Question

我最近在一个简单的网页上工作。我想将几乎所有的样式信息放在CSS文件中。页面的主要布局是一个表格。我看起来像这样：

<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>

，CSS就像：

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;}

问题是：
的 1 即可。即使我设置所有宽度，我仍然得到表格单元格：＆＃34; glowna_menu_lewe ＆＃34;和＆＃34; glowna_main ＆＃34;分为 50％：50％。我想细胞＆＃34; glowna_menu_lewe ＆＃34;只有 200px 或接近，而另一个可以填补剩下的空间。

2 即可。我想列出＆＃34; menu_lewe ＆＃34;在其单元格的顶部。现在它是垂直居中的，即使我将 verical-align 属性设置为top。

很抱歉发布了这么多代码，但我不知道可能导致问题的原因。

Answer 1

1 - 改变：

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

到此：

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

2-使用valign="top"属性到td标记而不是vertical-align:top;

CSS表自定义宽度

1 个答案: