当前位置:编程学习 > C#/ASP.NET >>

table对齐问题

<html>
<head>
    <title></title>
</head>
<body>
    <div style="position: absolute; margin-top: 200px; width: 100px; height: 200px;
        margin-left: 100px; zindex: 7" id="timetest">
        <table style="font-size: 10px" width="100%" height="100%">
            <tbody>
                <tr>
                    <td valign="bottom">
                        <div style="background-color: yellow; width: 100%;  height: 17%; font-size: 1px">
                        </div>
                    </td>
                    <td valign="bottom">
                        <div style="background-color: yellow; width: 100%;  height: 19%; font-size: 1px">
                        </div>
                    </td>
                    <td valign="bottom">
                        <div style="background-color: yellow; width: 100%;  height: 27%; font-size: 1px">
                        </div>
                    </td>
                    <td valign="bottom">
                        <div style="background-color: yellow; width: 100%;  height: 37%; font-size: 1px">
                        </div>
                    </td>
                    <td valign="bottom">
                        <div style="background-color: yellow; width: 100%;  height: 47%; font-size: 1px">
                        </div>
                    </td>
                    <td valign="bottom">
                        <div style="background-color: yellow; width: 100%;  height: 57%; font-size: 1px">
                        </div>
                    </td>
                    <td valign="bottom">
                        <div style="background-color: yellow; width: 100%;  height: 67%; font-size: 1px">
                        </div>
                    </td>
                    <td valign="bottom">
                        <div style="background-color: yellow; width: 100%;  height: 30%; font-size: 1px">
                        </div>
                    </td>
                    <td valign="bottom">
                        <div style="background-color: yellow; width: 100%;  height: 67%; font-size: 1px">
                        </div>
                    </td>
                    <td valign="bottom">
                        <div style="background-color: yellow; width: 100%;  height: 100%; font-size: 1px">
                        </div>
                    </td>
                    <td valign="bottom">
                        <div style="background-color: yellow; width: 100%;  height: 10%; font-size: 1px">
                        </div>
                    </td>
                    <td valign="bottom">
                        <div style="background-color: yellow; width: 100%;  height: 67%; font-size: 1px">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td height="20">
                        1
                    </td>
                    <td height="20">
                        2
                    </td>
                    <td height="20">
                        3
                    </td>
                    <td height="20">
                        4
                    </td>
                    <td height="20">
                        5
                    </td>
                    <td height="20">
                        6
                    </td>
                    <td height="20">
                        7
                    </td>
                    <td height="20">
                        8
                    </td>
                    <td height="20">
                        9
                    </td>
                    <td height="20">
                        10
                    </td>
                    <td height="20">
                        11
                    </td>
                    <td height="20">
                        12
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>



黄条不能底对齐,,求解。。 --------------------编程问答--------------------
<!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>
  <title></title>
</head>
<body>
  <div style="position: absolute; margin-top: 200px; width: 100px; height: 200px;
  margin-left: 100px; z-index: 7" id="timetest">
  <table style="font-size: 10px" width="100%">
  <tbody>
  <tr style="height: 200px;">
  <td valign="bottom" style="height: 200px;">
  <div style="background-color: yellow; width: 100%; height: 17%; font-size: 1px">
 </div>
  </td>
  <td valign="bottom" style="height: 200px;">
  <div style="background-color: yellow; width: 100%; height: 19%; font-size: 1px">
  
  </div>
  </td>
  <td valign="bottom" style="height: 200px;">
  <div style="background-color: yellow; width: 100%; height: 27%; font-size: 1px">
  
  </div>
  </td>
  <td valign="bottom" style="height: 200px;">
  <div style="background-color: yellow; width: 100%; height: 37%; font-size: 1px">
  
  </div>
  </td>
  <td valign="bottom" style="height: 200px;">
  <div style="background-color: yellow; width: 100%; height: 47%; font-size: 1px">
  
  </div>
  </td>
  <td valign="bottom" style="height: 200px;">
  <div style="background-color: yellow; width: 100%; height: 57%; font-size: 1px">
  
  </div>
  </td>
 <td valign="bottom" style="height: 200px;">
  <div style="background-color: yellow; width: 100%; height: 67%; font-size: 1px">
  
  </div>
  </td>
  <td valign="bottom" style="height: 200px;">
  <div style="background-color: yellow; width: 100%; height: 30%; font-size: 1px">
  
  </div>
  </td>
  <td valign="bottom" style="height: 200px;">
  <div style="background-color: yellow; width: 100%; height: 67%; font-size: 1px">
  
  </div>
  </td>
  <td valign="bottom" style="height: 200px;">
  <div style="background-color: yellow; width: 100%; height: 100%; font-size: 1px">
  
  </div>
  </td>
  <td valign="bottom" style="height: 200px;">
  <div style="background-color: yellow; width: 100%; height: 10%; font-size: 1px">
  
  </div>
  </td>
  <td valign="bottom" style="height: 200px;">
  <div style="background-color: yellow; width: 100%; height: 67%; font-size: 1px">
  
  </div>
  </td>
  </tr>
  <tr>
  <td height="20">
  1
  </td>
  <td height="20">
  2
  </td>
  <td height="20">
  3
  </td>
  <td height="20">
  4
  </td>
  <td height="20">
  5
  </td>
  <td height="20">
  6
  </td>
  <td height="20">
  7
  </td>
  <td height="20">
  8
  </td>
  <td height="20">
  9
  </td>
  <td height="20">
  10
  </td>
  <td height="20">
  11
  </td>
  <td height="20">
  12
  </td>
  </tr>
  </tbody>
  </table>
  </div>
</body>
</html>
--------------------编程问答-------------------- --------------------编程问答-------------------- 方法一:你把背景设为黄色 然后用白色去填充黄色余下的就是结果了
方法二: 或者把Height:-10%不知道有没有用 --------------------编程问答-------------------- 不对,如果<div style="background-color: yellow; width: 100%; height: 100%; font-size: 1px"> 这里面的height设置为100 不设置成百分比就能由下到上显示,如果设置百分比它就由上到下显示。
我现在想要的是设置百分比能由下到上显示。 --------------------编程问答-------------------- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"   这个不要加
补充:.NET技术 ,  ASP.NET
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,