让div充满td


有时候在td中需要放置div,但默认的div会在td的中间,我们需要的是div在td的上部,如下方式可以使得div填充满td或者div在td的上部分固定。

效果如下:

代码如下:

<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>无标题文档</title>
 
<style type="text/css">
 
<!--
 
.grid {
 
font-family: "Courier New", Courier, monospace;
 
font-size: 12px;
 
font-style: normal;
 
background:#d1d1d1;
 
}
 
.grid th{
 
height:19px;
 
text-align:left;
 
vertical-align:middle;
 
padding:0px 0px 0px 5px;
 
background:#f0f1f3;
 
}
 
.grid td{ height:18px; text-align:left; vertical-align:top; padding:0px 0px 0px 0px; background:#ffffff; word-break:break-all; height:100%; }  
.grid td a{
 
margin-left:5px;
 
}
 
.changed{ background:#cccccc; padding:1px 5px 1px 5px; margin:1px; border:1px solid #f4ede6; position: static; bottom:0px; line-height:20px; }  
.changed a{
 
margin-left:-5px;
 
}
 
-->
 
</style>
 
</head>
 
<body>
 
<table border="0" cellspacing="1" cellpadding="0" class="grid">
 
  <tr>
 
    <th><a>header</a></th>
 
    <th><a>header</a></th>
 
    <th><a>header</a></th>
 
    <th><a>header</a></th>
 
    <th><a>header</a></th>
 
    <th><a>header</a></th>
 
  </tr>
 
  <tr>
 
    <td><a>2008</a></td>
 
    <td><a>2008</a></td>
 
    <td>
 
      <div class="changed">
 
       <a>高度</a>
 
      </div>
 
    </td>
 
    <td><div class="changed"><a>看我左面这个td中的div,高度就没有充满,还是根据内容决定大小的,我想让它也变的和这个一样高,即永远保持充满td,该怎么办?          看我左面这个td中的div,高度就没有充满,还是根据内容决定大小的,我想让它也变的和这个一样高,即永远保持充满td,该怎么办?</a></div></td>
 
    <td><a>2008</a></td>
 
    <td><a>2008</a></td>
 
  </tr>
 
  <tr>
 
    <td><a>微软</a></td>
 
    <td><a>雅虎</a></td>
 
    <td><a>搜狐</a></td>
 
    <td><a>新浪</a></td>
 
    <td><a>百度</a></td>
 
    <td><a>谷歌</a></td>
 
  </tr>
 
</table>
 
</body>
 
</html>

 本文转载自:http://bbs.51js.com/thread-79235-1-1.html 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM