[已解决问题] Table 排版問題
提问时间: 2007-12-24 15:01
悬赏分：200 浏览:714 次
我在一個 Table 中加入三個 tr，其中第一及第三個 tr 是固定高度(20px)，而剩下的高度就留給中間的 tr。
而在中間的 tr 中置入一個 div，當 div 的資料太多時就會出現捲軸，排版的設定如下所示。
這樣的排版在 IE 上是正常的，不過在 FireFox 會出現異常，div 的高度會因內容多少而一定被拉高，不會產生捲軸；
這應該是 IE 及 FireFox 對 css 的解析不一致所導致，請問有比較了解 css 設定的人，知道此情形怎麼解決嗎？
我有查到下面的文章，可以不使用 Table，直接使用 div 可以解決這個問題。不過目前開發的 web-erp 系統已經幾百張表單了，不太可能做這種大幅度的版面調整。
最小高度100%页脚保持在底部的布局方法
http://www.ui163.com/w3c/second_581.html
而在中間的 tr 中置入一個 div，當 div 的資料太多時就會出現捲軸，排版的設定如下所示。
這樣的排版在 IE 上是正常的，不過在 FireFox 會出現異常，div 的高度會因內容多少而一定被拉高，不會產生捲軸；
這應該是 IE 及 FireFox 對 css 的解析不一致所導致，請問有比較了解 css 設定的人，知道此情形怎麼解決嗎？
我有查到下面的文章，可以不使用 Table，直接使用 div 可以解決這個問題。不過目前開發的 web-erp 系統已經幾百張表單了，不太可能做這種大幅度的版面調整。
最小高度100%页脚保持在底部的布局方法
http://www.ui163.com/w3c/second_581.html
<html>
<head>
<meta http-equiv="Content-Language" content="zh-tw">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>Table 排版</title>
</head>
<body style="width:100%; height:100%; margin: 0; padding: 0;">
<table border="1" id="table1" style="width:100%; height:100%">
<tr style="height:20px; background-color: #008000">
<td> </td>
</tr>
<tr>
<td>
<div style="min-height:100%; width:100%; overflow:auto; height:100%;">
<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>
所有回答(2)
|
给你这个代码。这个问题的原因是：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>
如果不熟CSS或操作困难的话可以考虑使用JS来调整. |
评论
|
9个月前 jeff377 : To. 杨正祎 謝謝你的答覆，不過你的答案還是無法達到我的需求。 中間的 td 需要依頁面的大小自動調整，不是固定大小。 |