固定表头CSS和Javascript

Question

我像这样从csstablegenerator获得了css

.custom_table {
    margin-top:5px;
    width:100%;
    border:1px solid #000000;

    -moz-border-radius-bottomleft:0px;
    -webkit-border-bottom-left-radius:0px;
    border-bottom-left-radius:0px;

    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;

    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;

    -moz-border-radius-topleft:0px;
    -webkit-border-top-left-radius:0px;
    border-top-left-radius:0px;
}.custom_table table{
    border-collapse: collapse;
        border-spacing: 0;
    width:100%;
    height:100%;
    margin:0px;padding:0px;
}.custom_table tr:last-child td:last-child {
    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;
}
.custom_table table tr:first-child td:first-child {
    -moz-border-radius-topleft:0px;
    -webkit-border-top-left-radius:0px;
    border-top-left-radius:0px;
}
.custom_table table tr:first-child td:last-child {
    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;
}.custom_table tr:last-child td:first-child{
    -moz-border-radius-bottomleft:0px;
    -webkit-border-bottom-left-radius:0px;
    border-bottom-left-radius:0px;
}.custom_table tr:hover td{
    /*background-color:#ffffff;*/


}
.custom_table td{
    vertical-align:middle;

    background-color:#aad4ff;

    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    text-align:center;
    padding:7px;
    font-size:11px;
    font-family:Arial;
    font-weight:normal;
    color:#000000;
}.custom_table tr:last-child td{
    border-width:0px 1px 0px 0px;
}.custom_table tr td:last-child{
    border-width:0px 0px 1px 0px;
}.custom_table tr:last-child td:last-child{
    border-width:0px 0px 0px 0px;
}
.custom_table tr:first-child td{
        background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) );
    background:-moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f");  background: -o-linear-gradient(top,#005fbf,003f7f);
    background-color:#005fbf;
    border:0px solid #000000;
    text-align:center;
    border-width:0px 0px 1px 1px;
    font-size:14px;
    font-family:Arial;
    font-weight:bold;
    color:#ffffff;
}
.custom_table tr:first-child:hover td{
    background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) );
    background:-moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f");  background: -o-linear-gradient(top,#005fbf,003f7f);

    background-color:#005fbf;
}
.custom_table tr:first-child td:first-child{
    border-width:0px 0px 1px 0px;
}
.custom_table tr:first-child td:last-child{
    border-width:0px 0px 1px 1px;
}

我想结合我的CSS

<style>
  div {position: absolute;}
  td {width: 250px;}
</style>

<div id='div_base' style='left: 20px; top: 20px; width: 600px; height: 400px; border: 1px black solid;'>
  <div id='div_header' style='height: 25px; width: 100%; overflow: hidden;'>
    <table id='table_header' style='position: absolute; top: 0px; left: 0px; width: 1500px;'>
      <tr style='background-color: grey; color: white;'>
        <td>name</td><td>phone</td><td>e-mail</td><td>date</td><td>company</td><td>city</td>
      </tr>
    </table>
  </div>
  <div id='div_data' style='top: 25px; bottom: 0px; width: 100%; overflow: auto; '>
    <table id='table_data' style='left: 0px; bottom: 0px; width: 1500px;'>
      <tr style='background-color: white;'>
        <td>John Smith</td><td>11111111</td><td>johnsmith@common.com</td><td>2010-10-10 10:10:10</td><td>World Rule ltd.</td><td>London</td>
      </tr>
      <tr style='background-color: silver;'>
        <td>Jane Smith</td><td>22222222</td><td>janesmith@common.com</td><td>2011-11-11 11:11:11</td><td>Power Gmbh.</td><td>Paris</td>
      </tr>
      <tr style='background-color: white;'>
        <td>John Doe</td><td>33333333</td><td>johnsmith@missing.com</td><td>2012-12-12 12:12:12</td><td>ACME</td><td>New York</td>
      </tr>
      <tr style='background-color: silver;'>
        <td>Jane Doe</td><td>44444444</td><td>janesmith@missing.com</td><td>2013-13-13 13:13:13</td><td>Evil Corp.</td><td>Budapest</td>
      </tr>
    </table>
  </div>
</div>

<script type="text/javascript">
  function doScrollEvent(ev) {
    var table = document.getElementById('table_header');
    table.style.left = -ev.target.scrollLeft + 'px';
  } 

  var container = document.getElementById('div_data');
  if(container.addEventListener)
    container.addEventListener('scroll', doScrollEvent, false);   
  else if (container.attachEvent)
    container.attachEvent('onscroll', doScrollEvent); 
</script>

我想让我的表具有固定的垂直标题和水平滚动的标题。 我尝试的问题是桌子位置。 有人能帮我吗？

Answer 1

HTML默认情况下不会这样做。

我建议使用这些JavaScript库之一，而不要重新发明轮子。

http://mkoryak.github.io/floatThead/

http://www.fixedheadertable.com/

他们俩都在自己的站点上有演示。

Answer 2

在CSS中，为表格标题定义一个固定的高度，并使溢出属性滚动； 喜欢：

#table_header{
    height: 40px;
    overflow: scroll;
}