Html表 - 带有固定标题的垂直滚动

时间：2018-02-02 14:37:11

标签： html google-chrome scroll html-table

我有一个包含许多列（甚至50列！）的HTML表格。 我试图有可能水平滚动（所有表格）和垂直滚动（固定标题）。

以下链接中列出的所有解决方案都有一个小错误：如果在Chrome中我执行 ctrl + f 来查找特定列名称（我的表有很多列！），标题不会自动水平滚动（Chrome的原生功能）。

尝试了解决方案的链接：HTML table with 100% width, with vertical scroll inside tbody

提议的任何解决方案？

2 个答案:

答案 0 :(得分：0)

您可以将表格放在包含max-width:100%和overflow-x: auto;的div中。使用您链接的SO帖子中接受的解决方案，我创建了一个简单的例子：

＆＃13;
＆＃13; 
// Change the selector if needed
var $table = $('table.scroll'),
  $bodyCells = $table.find('tbody tr:first').children(),
  colWidth;

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
  // Get the tbody columns width array
  colWidth = $bodyCells.map(function() {
    return $(this).width();
  }).get();

  // Set the width of thead columns
  $table.find('thead tr').children().each(function(i, v) {
    $(v).width(colWidth[i]);
  });
}).resize(); // Trigger resize handler
＆＃13; 
.table-master {
  max-width: 300px;
  overflow-x: auto;
}

table.scroll {
  /* width: 100%; */
  /* Optional */
  /* border-collapse: collapse; */
  border-spacing: 0;
  border: 2px solid black;
}

table.scroll tbody,
table.scroll thead {
  display: block;
}

thead tr th {
  height: 30px;
  line-height: 30px;
  /* text-align: left; */
}

table.scroll tbody {
  height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}

tbody {
  border-top: 2px solid black;
}

tbody td,
thead th {
  /* width: 20%; */
  /* Optional */
  border-right: 1px solid black;
  /* white-space: nowrap; */
}

tbody td:last-child,
thead th:last-child {
  border-right: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-master">
  <table class="scroll">
    <thead>
      <tr>
        <th>Head 1</th>
        <th>Head 2</th>
        <th>Head 3</th>
        <th>Head 4</th>
        <th>Head 5</th>
        <th>Head 5</th>
        <th>Head 5</th>
        <th>Head 5</th>
        <th>Head 5</th>
        <th>Head 5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
      </tr>
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
        <td>Content 4</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
        <td>Content 5</td>
      </tr>
    </tbody>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

在这个例子中，我使用了max-width：300px;使效果可见

答案 1 :(得分：0)

我最近三天就这个问题工作了。 你可能会发现一些不错的JQuery解决方案。 这是我在纯JavaScript和纯JavaScript中的方法：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta charset="utf-8">
<title>Table Test</title>
<script type="text/javascript">
window.onload = function() { NoScrollTables(); }

/* Set all tables, where a "noscroll-"+id exists to no scroll */
function NoScrollTables()
{
var list = document.getElementsByTagName('table');
for (var i = 0; i < list.length; i++)
    {
    if (document.getElementById('noscroll-' + list[i].id) != null) NoScrollTable(list[i].id);
    }
};

/* Initialize a single table to no-scroll */
function NoScrollTable(TabId)
{
var headerwidth=[]; // Storage for width of main table
var maintab = document.getElementById(TabId);
var noscroll = document.getElementById('noscroll-'+TabId);
var restwidth = noscroll.offsetWidth;
for (var i = 0; i < maintab.rows[1].cells.length; i++) headerwidth[i] = maintab.rows[1].cells[i].clientWidth;
var content = maintab.rows[0].innerHTML;
noscroll.rows[0].innerHTML = content;
maintab.rows[0].innerHTML='';
for (i = 0; i < maintab.rows[1].cells.length; i++)  // Set width for both tables identically
    {
    noscroll.rows[0].cells[i].width = headerwidth[i];
    maintab.rows[1].cells[i].width = headerwidth[i];
    restwidth = restwidth - headerwidth[i];
    }
i--;
noscroll.rows[0].cells[i].width = parseInt(noscroll.rows[0].cells[i].width) + parseInt(restwidth); // Expand last cell over possible scrollbar
return;
};

</script>
<style type="text/css">
body {
    text-align: left;
    }
table{
    width: 100%;
    border: 0;
    border-spacing: 0;
    padding: 0;
    clear: both;
    }
table th{
    background-color:#456789;
    display: inline-block;
    float: left;
    padding: 0;
}

table td{
    background-color:#999;
}
</style>
</head><body>

<h1>Pretty Table with pure JavaScript</h1>
<p>Just put an empty table above and name the id with praefix 'noscroll-{mytable}' where {mytable} is the id of the table below.<br/><br/></p>

<div style="width:600px;">
<table id='noscroll-TestTable' >
<thead>
<tr></tr>
</thead>
</table>
</div>
<div style="width:600px; max-height: 300px; overflow: auto;">
<table id='TestTable' style='max-height: 180px; overflow-y: auto;'>
<thead>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr>
        <td>And Repeat 1</td>
        <td>And Repeat 2</td>
        <td>And Repeat 3</td>
    </tr>
    <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td>Cell Content 3</td>
    </tr>
    <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
    </tr>
    <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr>
        <td>End of Cell Content 1</td>
        <td>End of Cell Content 2</td>
        <td>End of Cell Content 3</td>
    </tr>
</tbody>
</table>
</div>

</body>
</html>

JSFiddle：https://jsfiddle.net/Mac65/mf494nuw/34/

相关问题
最新问题