• 让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 

  • 相关阅读:
    学习 | mockjs入门
    学习 | 基于require.js的三级联动菜单【入门】
    Android_百度地图基本用法5
    Android_百度地图基本用法4
    Android_百度地图基本用法3
    Android_百度地图基本用法2
    Android_百度地图基本用法1
    Android_Event Bus 的基本用法
    Kotlin基础-扩展
    Kotlin基础-泛型
  • 原文地址:https://www.cnblogs.com/zhaiajing1985/p/3082579.html
Copyright © 2020-2023  润新知