首页 新闻 搜索 专区 学院

Table 排版問題

0
悬赏园豆:200 [已关闭问题]
我在一個 Table 中加入三個 tr,其中第一及第三個 tr 是固定高度(20px),而剩下的高度就留給中間的 tr。<br>而在中間的 tr 中置入一個 div,當 div 的資料太多時就會出現捲軸,排版的設定如下所示。<br><br>這樣的排版在 IE 上是正常的,不過在 FireFox 會出現異常,div 的高度會因內容多少而一定被拉高,不會產生捲軸;<br>這應該是 IE 及 FireFox 對 css 的解析不一致所導致,請問有比較了解 css 設定的人,知道此情形怎麼解決嗎?<br><br>我有查到下面的文章,可以不使用 Table,直接使用 div 可以解決這個問題。不過目前開發的 web-erp 系統已經幾百張表單了,不太可能做這種大幅度的版面調整。<br><br>最小高度100%页脚保持在底部的布局方法<br>http://www.ui163.com/w3c/second_581.html<br><br><pre>&lt;html&gt;<br><br>&lt;head&gt;<br>&lt;meta http-equiv="Content-Language" content="zh-tw"&gt;<br>&lt;meta http-equiv="Content-Type" content="text/html; charset=big5"&gt;<br>&lt;title&gt;Table 排版&lt;/title&gt;<br>&lt;/head&gt;<br>&lt;body style="width:100%; height:100%; margin: 0; padding: 0;"&gt;<br><br>&lt;table border="1" id="table1" style="width:100%; height:100%"&gt;<br> &lt;tr style="height:20px; background-color: #008000"&gt;<br> &lt;td&gt; &lt;/td&gt;<br> &lt;/tr&gt;<br> &lt;tr&gt;<br> &lt;td&gt;<br> &lt;div style="min-height:100%; width:100%; overflow:auto; height:100%;"&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;p&gt;這是DIV&lt;/p&gt;<br> &lt;/div&gt; <br> &lt;/td&gt;<br> &lt;/tr&gt;<br> &lt;tr style="height:20px; background-color: #008000"&gt;<br> &lt;td&gt; &lt;/td&gt;<br> &lt;/tr&gt;<br>&lt;/table&gt;<br><br>&lt;/body&gt;<br><br>&lt;/html&gt;<br></pre><br><br>
jeff377的主页 jeff377 | 初学一级 | 园豆:0
提问于:2007-12-24 15:01
< >
分享
其他回答(1)
0
给你这个代码。这个问题的原因是:firefox会优先min-height属性造成的。 还有你的页面没有设置文档类型,这是不好的习惯。 <!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> <title>new document</title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> </head> <body> <table border="1" id="table1" style="width: 100%; height: 100%"> <tr style="height: 20px; background-color: #008000"> <td> </td> </tr> <tr> <td> <div style="height: 100px; width: 100%; overflow-y: auto; border: 1px solid red;"> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> <p>這是DIV</p> </div>   </td> </tr> <tr style="height: 20px; background-color: #008000"> <td> </td> </tr> </table> </body> </html>
阿一(杨正祎) | 园豆:650 (小虾三级) | 2007-12-24 17:42
0
如果不熟CSS或操作困难的话可以考虑使用JS来调整.
沙加 | 园豆:3680 (老鸟四级) | 2007-12-25 12:56
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册