模态对话框中的表格内容太长，就会出现水平滚动条，怎么办？

于娜 2011-02-20 09:33:36

index.html 页面

[code=HTM]<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery.js" type="text/javascript"></script>
<script>

function openDialog()
{
window.showModalDialog('my.html', window, "dialogWidth:500px; dialogHeight:300px;");
}

</script>
</head>
<body>
<input type="button" value="打开模态话框" onclick="openDialog()"/>
</body>
</html>

[/code]

my.html

[code=HTM]
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table width="96%" border="0" align="center" cellspacing="1">
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
<tr> <td align="center"> 于娜 </td> <td align="center"> 1980 </td> </tr>
</table>
</body>
</html>

[/code]

...全文

702 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

孟子E章 2011-03-12

打赏
举报

咋会没效果？你完全是这么测试的吗

licip 2011-03-12

打赏
举报

+1[Quote=引用 2 楼 net_lover 的回复:]
办法1
加大
dialogWidth:500px; dialogHeight:300px;
设置

办法2，采用服务器端的代码进行分页。

办法3，ajax动态加载数据。

办法4，采用隐藏、显示的方法进行显示

办法5，设置属性不出现滚动条
"dialogWidth:500px; dialogHeight:300px;scroll:no;resizable:no"

……
[/Quote]

于娜 2011-03-12

打赏
举报

没效果啊

于娜 2011-02-20

打赏
举报

我只想要垂直滚动条，不要水平滚动条，宽度够用了

孟子E章 2011-02-20

打赏
举报

办法1
加大
dialogWidth:500px; dialogHeight:300px;
设置

办法2，采用服务器端的代码进行分页。

办法3，ajax动态加载数据。

办法4，采用隐藏、显示的方法进行显示

办法5，设置属性不出现滚动条
"dialogWidth:500px; dialogHeight:300px;scroll:no;resizable:no"

BTW：内容多出现滚动条是最好的方法，如果没有滚动条，下面的内容怎么看呢？

于娜 2011-02-20