html - 带有固定标题和水平垂直滚动的表格

Question

我想构建一个带有固定标题的可滚动(双向)表格，到目前为止运气不好。

我尝试了以下方法:

一、解决方法:

<div style='overflow: auto;'>
  <table>...</table>
</div>

问题: header 未修复。

b、解决方法:

<div style='overflow-x: auto;'>
  <table>(header only)</table>
  <div style='overflow-y: auto;'>
    <table>(data only)</table>
  </div>
</div>

问题:只有当水平滚动条在最右边时，垂直滚动条才可见。

一定有一些简单的方法可以做到这一点，但我缺乏 HTML、CSS 知识，无法独自解决这个问题。我确实在这里看了一圈，还没有发现类似的问题。

(这不是实际代码，只是这样更容易说明情况。)

更新:更正代码以使“只写”用户满意

Answer 1

最后我找到了解决方案:

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

<div id='div_base' style='left: 20px; top: 20px; width: 600px; height: 90px; 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>