为什么表的主体滚动条不能在Internet Explorer 11上运行？

Question

我用可滚动的主体创建了这个表，但是当我在IE11上测试它不起作用时，我试图设置body{overflow:scroll}，body{height:1000px}，但似乎Internet Explorer忽略了它们。我究竟做错了什么。任何帮助表示赞赏。

问候，

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

        function detect() {
            var tbody = $('.scrollContent'),
                theader = $('.fixedHeader'),
                table = $('#Stable');

            console.log(tbody[0].scrollHeight);
            console.log(theader.height());
            console.log(table.height());

            if (table.height() - theader.height() < tbody[0].scrollHeight) {
                //alert('Overflowed height of table');

                $("html>body div.tableContainer table").css("width", "calc(100% - 16px)");
                $("html>body tbody.scrollContent").css("height", "100%");
                $("html>body tbody.scrollContent").css("width", "calc(100% + 15px)");

            } else {
                //alert('Did not overflow.');

                $("html>body div.tableContainer table").css("width", "100%");
                $("html>body tbody.scrollContent").css("height", "100%");
                $("html>body tbody.scrollContent").css("width", "100%");

            }
        }
        window.onload = function() {
            stripedTable();
            calcTh();
            calc();
            detect();

        };
        window.onresize = function() {
            stripedTable();
            calcTh();
            calc();
            detect();
        };
        /*
        $("tr").click(function() {
            detect();
        });
        */ //JqTree

th,
td {
  word-break: break-all;
  word-wrap: break-word;
}
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  height: 97%;
  font: font-family: 'agroverdana';
  margin: 5px 5px 7px 5px;
  padding: 0px 1px 3px 0px;
  border: 1px solid #9BC2E6;
  /*Scrollbar*/
  scrollbar-arrow-color: #000000;
  scrollbar-3dlight-color: #0000ff;
  scrollbar-highlight-color: #DDEBF7;
  scrollbar-face-color: #9fc7e8;
  scrollbar-shadow-color: #DDEBF7;
  scrollbar-darkshadow-color: #FFFF00;
  scrollbar-track-color: #DDEBF7;
}
::-ms-scrollbar {
  width: 15px;
  height: 7px;
}
::-ms-scrollbar-button {
  background-color: #DDEBF7;
  width: 15px;
  height: 17px;
}
::-ms-scrollbar-track-piece {
  background-color: #DDEBF7;
  -ms-border-radius: 0px;
}
::-ms-scrollbar-thumb:vertical {
  height: 5px;
  background-color: #9fc7e8;
  -ms-border-radius: 0px;
}
::-ms-scrollbar-thumb:horizontal {
  width: 3px;
  background-color: #9fc7e8;
  -ms-border-radius: 0px;
}
::-ms-scrollbar-button:vertical:increment {
  background-image: url(https://lh4.googleusercontent.com/-KQfCHJwQRHQ/UtceeoSe3SI/AAAAAAAACLg/KngWcfzAPSs/s1600/setabaixo.png);
}
::-ms-scrollbar-button:vertical:decrement {
  background-image: url(https://lh4.googleusercontent.com/-dgdE4h4PFxM/Utceh2Sh30I/AAAAAAAACLo/_CUrC-yGxrQ/s1600/setacima.png);
}
::-ms-scrollbar-thumb:hover {
  background-color: #87c2f2;
}
::-ms-scrollbar-thumb:active {
  background-color: #77bbf2;
}
/*Scrollbar*/

table,
td,
a {
  font-family: 'agroverdana';
  font-size: 11px
}
h1 {
  font-family: 'agroverdana';
  font-size: 14px;
  margin: 0 0 5px 0
}
div.tableContainer {
  clear: both;
  border-top: 1px solid #9fc7e8;
  border-bottom: 1px solid #9fc7e8;
  padding-right: 2px;
  height: 285px;
  overflow: auto;
  width: 100%;
}
html>body div.tableContainer {
  overflow: hidden;
  width: 100%;
  height: calc(100% - 108px);
}
div.tableContainer table {
  float: left;
  width: 100%;
  height: 100%;
}
thead.fixedHeader tr {
  position: relative;
}
.thSpan {
  font-family: 'agroverdana';
  font-size: 11px;
  font-weight: bold;
}
html>body thead.fixedHeader tr {
  display: block
}
thead.fixedHeader th {
  background: #9BC2E6;
  border-left: 1px solid #FFF;
  border-top: 1px solid #FFF;
  font-weight: normal;
  padding: 4px 3px;
  text-align: center;
}
html>body tbody.scrollContent {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100%;
}
tbody.scrollContent td,
tbody.scrollContent tr.normalRow td {
  background: #FFF;
  border-bottom: none;
  border-left: 1px solid #FFF;
  border-top: 1px solid #FFF;
  padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
  background: #DDEBF7;
  border-bottom: none;
  border-left: 1px solid #FFF;
  border-top: 1px solid #FFF;
  padding: 2px 3px 3px 4px
}
.scrollTable,
.scrollContent {
  overflow: visible
}
/*Section*/

#content {
  left: 1px;
  border-top: solid 1px #9fc7e8;
  width: 100%;
  flex: 1;
  padding: 1px;
}
#navbar {
  padding: 3px 4px 4px 2px;
}
/*Section*/

/*Navigation Buttons*/

#navbutton {
  float: right;
}
.HeaderButton {
  transition: .7s ease-out;
  width: 25px;
  height: 25px;
  font-family: 'agroverdana';
  border: 1px solid white;
  cursor: pointer;
  border-radius: 100px;
  background-color: #9BC2E6;
}
.HeaderButton:hover {
  transition: .5s ease-in;
  border-width: 1px;
  border-color: #5099d5;
}
/*Navigation Buttons*/

#vpad-pesq {
  transition: 1s ease-out;
  float: left;
  border: 1px solid #9fc7e8;
  margin-right: 2px;
  height: 21px;
  background-color: white;
}
/*Searching box aka Textarea*/

#searching {
  transition: 1s ease-out;
  height: 21px;
  border: 1px solid #9fc7e8;
}
/*select box*/

#searching:hover,
#vpad-pesq:hover {
  transition: .3s ease-in;
  border-color: #5099d5
}
/*Title plus Version*/

#title {
  padding: 0;
  text-align: center;
  font-family: 'agroverdana';
  font-size: 14px;
  font-weight: bolder;
  color: #1e537d;
}
#version {
  text-align: right;
  font-family: agroverdana;
  color: #1e537d;
  font-size: 9px;
  float: right;
}
/*Title plus Version*/

#msgbar {
  border-bottom: 1px solid #9fc7e8;
  height: 20px;
  background-color: #F0F8FA;
}
#footer {
  text-align: right;
  border-top: solid 1px #9fc7e8;
  border-top: 0;
  max-height: 50px;
}
.footerButton {
  transition: 1s ease-out;
  width: 70px;
  height: 25px;
  color: #1e537d;
  font-family: 'agroverdana';
  background-color: #D0E5F5;
  border: 1px solid #9fc7e8;
  cursor: pointer;
  border-radius: 3px;
}
.footerButton:hover {
  transition: .3s ease-in;
  border-color: #5099d5
}
.footerButton:last-child {
  margin: 8px 15px 1px 0
}

<!DOCTYPE html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
<head>
	<!-- saved from url=(0014)about:internet -->
	<meta http-equiv="X-UA-Compatible" content="IE=Emulate />
    <title>wpadco03_calne#3</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="language" content="pt-br">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    
    <script type="text/javascript">
        
    </script>
</head>

<body>
    <header id="title">Central de Controle da Engenharia
        <span id="version">wpadco03.r | 1.2-10</span>
    </header>
    <section id="content">
        <header id="navbar">
            <input type="text" id="vpad-pesq" />
            <select name="Filtro" id="searching">
                <option>Código</option>
                <option>Nome</option>
            </select>
            <div id="navbutton">
                <button class="headerButton" title="Primeiros"></button>
                <button class="headerButton" title="Anteriores"></button>
                <button class="headerButton" title="Próximos"></button>
                <button class="headerButton" title="Últimos"></button>
            </div>
        </header>
    </section>
    <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><span class="thSpan">Header 1 overflow overflow overflow overflow overflow overflow</span></th>
                    <th><span class="thSpan">Header 2</span></th>
                    <th><span class="thSpan">Header 3</span></th>
                    <th><span class="thSpan">Header 4</span></th>
                    <th><span class="thSpan">Header 5</span></th>
                    <th><span class="thSpan">Header 6</span></th>
                    <th><span class="thSpan">Header 7</span></th>
                </tr>
            </thead>
            <tbody class="scrollContent">
                <tr class="normalRow"><td>First</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>20000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>30000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>30000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>40000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>50000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>60000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>70000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>80000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>90000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>11000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>12000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>13000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>14000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>15000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>16000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>17000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>18000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>More Cell Content 1</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
				<tr class="normalRow"><td>19000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td><td>10000</td></tr>
                <tr class="alternateRow"><td>Last</td><td>More Cell Content 2</td><td>More Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td><td>Cell Content 2</td><td>Cell Content 3</td></tr>
			</tbody>
        </table>
    </div>
    <section id="msgbar"></section>
    <footer id="footer">
        <button class="footerButton" title="Salvar Dados">Salvar</button>
        <button class="footerButton" title="Alterar Registro">Alterar</button>
        <button class="footerButton" title="Excluir Registro">Excluir</button>
        <button class="footerButton" title="Voltar Página">Voltar</button>
    </footer>
</body>

</html>

Answer 1

如果display的TBODY样式属性设置为block，则有一种方法可以在IE 11中显示带有滚动条的表格。

我想设置一些宽度，为TD的TBODY元素做。

下面的代码段：

table {
  border: 1px solid black;
  border-collapse: collapse;
  width:60%;
}

table thead {
  background: #a0a0a0;
  border-bottom: 1px solid black;
}

table tbody td {
  border: 1px solid #f0f0f0;
  width:40em;
}

table tbody {
  display: block;
  height: 10em;
  overflow: auto;
}

<table>
  <thead>
    <tr>
      <th>Hello</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>It's me</td>
    </tr>
    <tr>
      <td>I was wondering</td>
    </tr>
    <tr>
      <td>If after all these tries</td>
    </tr>
    <tr>
      <td>You'd like to switch</td>
    </tr>
    <tr>
      <td>Toward a valuable browser like me.</td>
    </tr>
    <tr>
      <td>Can you read me ?</td>
    </tr>
    <tr>
      <td>I'm dreaming about the coder I used to be</td>
    </tr>
    <tr>
      <td>When I was younger and free</td>
    </tr>
  </tbody>
</table>