如何将滚动条从内部移动到表格外部？

时间：2015-07-16 13:44:37

标签： javascript jquery css

我有这个可滚动的表，并注意到它只移动其tbody而不移动thead以及它应该是什么，但滚动条位于table内使thead和tbody解除混乱，所以我有一个想法将滚动条移到桌子外面，但我不知道怎么做到滚动条。你能告诉我怎么做吗？

＆＃34;长寿，繁荣＆＃34;

来自此

enter image description here

到此 enter image description here

＆＃13;
＆＃13; 
function removeClassName(elem, className) {
  elem.className = elem.className.replace(className, "").trim();
}

function addCSSClass(elem, className) {
  removeClassName(elem, className);
  elem.className = (elem.className + " " + className).trim();
}

String.prototype.trim = function() {
  return this.replace(/^\s+|\s+$/, "");
};

function stripedTable() {
  if (document.getElementById && document.getElementsByTagName) {
    var allTables = document.getElementsByTagName('table');
    if (!allTables) {
      return;
    }

    for (var i = 0; i < allTables.length; i++) {
      if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
        var trs = allTables[i].getElementsByTagName("tr");
        for (var j = 0; j < trs.length; j++) {
          removeClassName(trs[j], 'alternateRow');
          addCSSClass(trs[j], 'normalRow');
        }
        for (var k = 0; k < trs.length; k += 2) {
          removeClassName(trs[k], 'normalRow');
          addCSSClass(trs[k], 'alternateRow');
        }
      }
    }
  }
}

function calcTh() {

  var table = document.getElementsByTagName(table);
  for (var i = 0; i < table.length; i++) {
    table[i].width = (100 / table.length) + "%";
  }
}

function calc() {
  var table = document.getElementById("Stable");
  var w = table.offsetWidth; //total width of the table

  for (var y = 0; y < table.rows.length; y++) { // cycle through rows
    var row = table.rows[y];
    for (var x = 0; x < row.cells.length; x++) { // cycle through cells
      var cell = row.cells[x];
      cell.style.width = (w / row.cells.length) + "px"; // add 'px' for a unit
    }
  }
}

window.onload = function() {
  stripedTable();
  calc();
};
window.onresize = function() {
  stripedTable();
  calcTh();
  calc();
};
＆＃13; 
th {
  word-break: break-all;
}
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  background: #FFF;
  color: #000;
  font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin: 10px;
  padding: 0;
}
table,
td,
a {
  color: #000;
  font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
h1 {
  font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin: 0 0 5px 0
}
div.tableContainer {
  clear: both;
  border: 1px solid #963;
  height: 285px;
  overflow: auto;
  width: 100%;
}
html>body div.tableContainer {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
div.tableContainer table {
  float: left;
  width: 100%;
}
html>body div.tableContainer table {
  width: 100%;
}
thead.fixedHeader tr {
  position: relative
}
html>body thead.fixedHeader tr {
  display: block
}
thead.fixedHeader th {
  background: #C96;
  border-left: 1px solid #EB8;
  border-right: 1px solid #B74;
  border-top: 1px solid #EB8;
  font-weight: normal;
  padding: 4px 3px;
  text-align: left
}
thead.fixedHeader a,
thead.fixedHeader a:link,
thead.fixedHeader a:visited {
  color: #FFF;
  display: block;
  text-decoration: none;
  width: 100%
}
thead.fixedHeader a:hover {
  color: #FFF;
  display: block;
  text-decoration: underline;
  width: 100%
}
html>body tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
  width: 100%
}
/* make TD elements pretty. Provide alternating classes for striping the table */

/* http://www.alistapart.com/articles/zebratables/                             */

tbody.scrollContent td,
tbody.scrollContent tr.normalRow td {
  background: #FFF;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
  background: #EEE;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}
＆＃13; 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Pure CSS Scrollable Table with Fixed Header</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="language" content="en-us">

  <style type="text/css"></style>
</head>

<body>

  <h1>Pure CSS Scrollable Table with Fixed Header</h1>


  <div id="tableContainer" class="tableContainer">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable" id="Stable">
      <thead class="fixedHeader">
        <tr class="alternateRow">
          <th><a href="#">Header 1ahjsgdhjagsdhjgahjsdghjasgdhjagshjdgahjsdghjagsdhj</a>
          </th>
          <th><a href="#">Header 2</a>
          </th>
          <th><a href="#">Header 3</a>
          </th>
        </tr>
      </thead>
      <tbody class="scrollContent">
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>
        <tr class="normalRow">
          <td>Cell Content 1</td>
          <td>Cell Content 2</td>
          <td>Cell Content 3</td>
        </tr>
        <tr class="alternateRow">
          <td>More Cell Content 1</td>
          <td>More Cell Content 2</td>
          <td>More Cell Content 3</td>
        </tr>

      </tbody>
    </table>
  </div>

  <div>
    <br>
  </div>



</body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：3)

这对我来说是正确的效果：

html>body div.tableContainer table {
  width: calc(100% - 16px);
  overflow: visible;
}

.html>body tbody.scrollContent {
  width: calc(100% + 16px);
}

但是，它假设滚动条为16px宽，可能因浏览器而异。

相关问题
最新问题