table tr高度自适应

table tr高度自适应,第1张

可支持IE6+,firefox,chrome。其中容易被忽略的是

<DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN">

,不能使用XHTML

<DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN">

<html>

<HEAD>

<title>table布局中自适应高度的解决办法</title>

<style type="text/css">

html,body{height:100%font-size:12px}

td {border:1px solid redfont-size: 12pxcolor: #000000margin-left: 0pxmargin-top: 0pxmargin-right: 0pxmargin-bottom: 0px}

#main{border:1px solid redwidth:100%min-height:100%height:100%overflow:hidden !importantoverflow: visible}

#header{height:94pxborder:1px solid red}

</style>

</head>

<body>

<table id="main">

<tr><td id="header">我的顶部</td></tr>

<tr><td>我是主要内容</td></tr>

</table>

</body>

</html>

html中自适应表格的问题 *** 作方法:

1、实例代码

<body style="scroll:no">

  <table width="100%" height="100%">

   <tr>

    <td height="10px" id="conditions"></td>

   </tr>

   <tr>

    <td id="Content"></td>

   </tr>

   <tr>

    <td height="10px" id="btns">

     <input type="button" id="btnDel" value="删除" />

    </td>

   </tr>

  </table>

 </body>

2、实例代码如图:

3、代码各个用处分析:

这个表格分为3块

第一个id为conditions,放查询条件。

第二个id为Content,放显示内容。

第三个id为btnDel,放删除按钮。

第一个和第三个宽度可以设置小一点,让内容自己去展开。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://www.outofmemory.cn/zaji/6162759.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表(0条)

保存