为什么隔行换色，下面Y轴一个劲的拉伸？


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery hover特效</title>
<script src="jquery.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function() {
$("#orderedlist tbody tr").hover(function() {
// $("#orderedlist li:last").hover(function() {
$(this).addClass("blue");
}, function() {
$(this).removeClass("blue");
});
});
</script>
<style>
.blue {
        background:#bcd4ec;  
}
</style>
</head>
<body>
<div class="main"  style=" width:100%;overflow-x:auto; overflow-y:hidden;"> 
<table id="orderedlist" width="400%" border="0" cellspacing="0" cellpadding="0" > 
<!--用class="stripe"来标识需要使用该效果的表格-->
<thead>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>QQ</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>邓国梁</td>
    <td>23</td>
    <td>31540205</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>温家宝</td>
    <td>23</td>
    <td>31540205</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>奥巴马</td>
    <td>23</td>
    <td>31540205</td>
    <td>[email protected]</td>
  </tr>
</tbody>
</table>
</div>
12345
</body>
</html>
为什么隔行换色，下面Y轴一个劲的拉伸？

解决方案 »

  1.   

    <!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>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>jQuery hover特效</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#orderedlist tbody tr").hover(function() {
                // $("#orderedlist li:last").hover(function() {
                    $(this).addClass("blue");
                }, function() {
                    $(this).removeClass("blue");
                });
            });
        </script>
        <style type="text/css">
            .blue{ background: #bcd4ec; }
        </style>
    </head>
    <body>
        <div class="main" style="width: 100%;border:solid 2px red;padding:2px; overflow-x: auto; overflow-y: hidden;">
            <table id="orderedlist" style="border:solid 2px green;" width="400%" border="0" cellspacing="0" cellpadding="0">
                <!--用class="stripe"来标识需要使用该效果的表格-->
                <thead>
                    <tr><th>姓名</th><th>年龄</th><th>QQ</th><th>Email</th></tr>
                </thead>
                <tbody>
                    <tr><td>邓国梁</td><td>23</td><td>31540205</td><td>[email protected]</td></tr>
                    <tr><td>温家宝</td><td>23</td><td>31540205</td><td>[email protected]</td></tr>
                    <tr><td>奥巴马</td><td>23</td><td>31540205</td><td>[email protected]</td></tr>
                </tbody>
            </table>
        </div>
        12345
    </body>
    </html>改了一下样式， 方便你查看。你问的问题似乎不对， 应该是X方向在延伸。而不是Y方向。这个table的width为400%， 当然在X方向有4倍的宽度， 而且父元素div又允许在x方向有滚动条，不允许在y方向有滚动条。当然如此啦！如果table的宽度为100%， 则在两方向都不会有滚动条。
      

  2.   

    你的解决方法不对。
    table>100%是需求，不是解决方案。
    我的问题时，当鼠标在各行移动时，下面 “1234”不断的变换位置。
    具体描述为:外部容器设置为overflow:auto且内容元素宽度超出容器宽度，在切换内部元素class时会影响到容器的尺寸。
    例如：
    http://social.microsoft.com/Forums/id-ID/267/thread/1c239c1d-84d2-461b-991d-d7834edaa121
      

  3.   


    昨天详细的搞了一下,IE7/8/Chrome/Firefox都可以,IE9支持不行。
    总体的解决方法就是把 hover属性写入样式里面。例如 xx_table tr:hover{
      background-color:#ffefc9;
    };
    然后表格就可以了，双行色的：even属性倒是无BUG。
      

  4.   

    您的代码根本不是表格隔行变色，而是鼠标经过变色。
     
     $("#orderedlist tbody tr").hover(
        function() {$(this).addClass("blue");}, 
        function() {$(this).removeClass("blue");});    $("#orderedlist tbody tr:nth-child(odd)").addClass("blue");