Html 带有固定标题和hotizontal垂直滚动条的表格_Html_Css

Html 带有固定标题和hotizontal垂直滚动条的表格

html css

Html 带有固定标题和hotizontal垂直滚动条的表格,html,css,Html,Css,我想建立一个固定标题的可滚动（双向）表，目前为止运气不好我尝试了以下方法： a、解决方案： <div style='overflow: auto;'> <table>...</table> </div> <div style='overflow-x: auto;'> <table>(header only)</table> <div style='overflow-y: auto;'>

我想建立一个固定标题的可滚动（双向）表，目前为止运气不好

我尝试了以下方法：

a、解决方案：

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

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

<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>

...

问题：标题未修复

b、解决方案：

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

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

<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>


（仅标题）
（只提供资料）

问题：垂直滚动条仅在水平滚动条位于最右侧时可见

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

（这不是实际的代码，只是这样更容易解释情况。）

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

要使页眉固定，您可以在页眉俯冲中使用如下样式：

<div style="position: fixed;">
    /*Header Text*/
</div>


/*标题文本*/

或：


/*标题文本*/

要使该框可双向滚动到div，请添加：

<div style="overflow: scroll;"></div>

尝试以下代码：

<div class="outer-container"> <!-- absolute positioned container -->
<div class="inner-container">

    <div class="table-header">
        <table id="headertable" width="100%" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th class="header-cell col1">One</th>
                    <th class="header-cell col2">Two</th>
                    <th class="header-cell col3">Three</th>
                    <th class="header-cell col4">Four</th>
                    <th class="header-cell col5">Five</th>
                </tr>
            </thead>
        </table>
    </div>

    <div class="table-body">
        <table id="bodytable" width="100%" cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</div>

CSS::

body {
    margin:0;
    padding:0;
    height: 100%;
    width: 100%;
}
table {
    border-collapse: collapse; /* make simple 1px lines borders if border defined */
}
tr {
    width: 100%;
}

.outer-container {
    background-color: #ccc;
    position: absolute;
    top:0;
    left: 0;
    right: 300px;
    bottom:40px;
    overflow: hidden;

}
.inner-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow-x: scroll;
    overflow-y:hidden;
}
.table-header {
    float:left;
    width: 100%;
}
.table-body {
    float:left;
    height: 100%;
    width: inherit;
    overflow-y: scroll;
}
.header-cell {
    background-color: yellow;
    text-align: left;
    height: 40px;
}
.body-cell {
    background-color: blue;
    text-align: left;
}
.col1, .col3, .col4, .col5 {
    width:120px;
    min-width: 120px;
}
.col2 {
    min-width: 300px;
}


一个
两个
三
四
五
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排
body row2 en nog meer
身体第1排
身体第2排
身体第2排
身体第2排