让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 

原文地址:https://www.cnblogs.com/zhaiajing1985/p/3082579.html