Question

我在css中面临一个问题，即使用水平和垂直滚动条修复标题。它在铬合金上工作得很好但在mozilla中工作得不好。

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" > </script> 
    <script  type="text/javascript"> 
        $(function() { 
            if($.browser.mozilla) 
                //table row doean't float in firefox, div floats 
                $(".floatingHeader" + " tr th div") 
                        .addClass("floatingStyle"); 
            else 
                //table row can float in IE and Chrome 
                $(".floatingHeader"+ " tr th") 
                        .addClass("floatingStyle"); 
        }); 
        function changeFloatingHeaderPosition(container, headerId) { 
                if($.browser.webkit) //chrome rendering bug fix 
                    $("#"+headerId + " tr th") 
                        .css("visibility", "hidden"); 
                if($.browser.mozilla) 
                    $("#"+headerId + " tr th div") 
                        .css("top", container.scrollTop); 
                else 
                    $("#"+headerId + " tr th") 
                        .css("top", container.scrollTop); 
                if($.browser.webkit) //chrome rendering bug fix 
                    $("#"+headerId + " tr th") 
                        .css("visibility", "visible"); 
        } 

  // Remove this method if you are using jQuery earlier than 1.9
 (function() {
  var matched, browser;

  // Use of jQuery.browser is frowned upon.
  // More details: http://api.jquery.com/jQuery.browser
  // jQuery.uaMatch maintained for back-compat
  jQuery.uaMatch = function( ua ) {
  ua = ua.toLowerCase();

  var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
   /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
   /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
   /(msie) ([\w.]+)/.exec( ua ) ||
   ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
   [];

 return {
   browser: match[ 1 ] || "",
   version: match[ 2 ] || "0"
 };
  };

  matched = jQuery.uaMatch( navigator.userAgent );
  browser = {};

  if ( matched.browser ) {
 browser[ matched.browser ] = true;
 browser.version = matched.version;
  }

  // Chrome is Webkit, but Webkit is also Safari.
  if ( browser.chrome ) {
   browser.webkit = true;
  } else if ( browser.webkit ) {
     browser.safari = true;
  }

  jQuery.browser = browser;
 })();
    </script> 
    <style> 
        .floatingStyle 
        { 
            position:relative; 
            background-color:#829DC0; 
            top:0px; 
        } 
        .table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td {
border-top: 1px solid #DDDDDD;
line-height: 1.42857;
padding: 5px;
vertical-align: top;
 }


    </style> 
</head> 
<body> 
            <div class="floatingContainer"        onscroll="changeFloatingHeaderPosition(this, 'idHeader' );"      style="height:150px; width: 100px;overflow:auto;"> 
    <table class="table" cellspacing=0 cellpadding=0> 
        <thead class="floatingHeader" id="idHeader"> 
            <tr style="background:#006698"> 
                <th><div>Col1</div></th>
                <th ><div>Col2<div></th> 
                <th ><div>Col3<div></th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr><td>first_row</td><td>first_row</td><td>first_row</td></tr> 
            <tr><td>data</td><td>data</td><td>data</td></tr> 
            <tr><td>data</td><td>data</td><td>data</td></tr> 
            <tr><td>data</td><td>data</td><td>data</td></tr> 
            <tr><td>data</td><td>data</td><td>data</td></tr> 
            <tr><td>data</td><td>data</td><td>data</td></tr> 
            <tr><td>data</td><td>data</td><td>data</td></tr> 
            <tr><td>data</td><td>data</td><td>data</td></tr>             </tbody> 
    </table>

如果我为表头应用bootstrap类表，则在mozilla中滚动它并不是固定在顶部，因为它在chrome中工作。我想我错过了一些css。任何人都可以帮忙。

表格固定标题，带有水平和垂直滚动条

0 个答案: