- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我创建了这个带有可滚动主体的表格,但是当我在 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>
最佳答案
如果 TBODY
display
样式属性,则有一种方法可以在 IE 11 中显示带有滚动条的表格 设置为 block
。
我想设置一些宽度,为 TBODY
的 TD
元素设置。
下面的片段:
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>
关于javascript - 为什么表格的主体滚动条在 Internet Explorer 11 上不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32118185/
像其他人一样,我需要在 Internet Explorer 6 和 Internet Explorer 7 上测试我的代码。现在,Internet Explorer 8 为开发人员提供了一些很棒的工具
我已经浏览了几个小时的注册表,但似乎无法找到控制 Internet Explorer 临时 Internet 文件设置的注册表。我想从自动更改为其他内容。 最佳答案 HKCU\Software\Mic
这个问题在这里已经有了答案: 10年前关闭。 Possible Duplicate: Running Internet Explorer 6, Internet Explorer 7, and Int
作为一名开发者,我发现新的 Internet Explorer 版本完全是一场噩梦。我关闭了 Windows 功能,但无法安装 Internet Explorer 10 。它说它已经安装,但事实并非如
是否有任何分析器工具可以调试DOM中的哪个javascript /对象导致Internet Explorer挂起/崩溃。 CPU使用率将超过60%,我想知道其背后的原因,是哪个脚本/ Flash Ob
我正在尝试确定Internet Explorer上TTF字体格式的支持状态。 (我手头没有任何Windows计算机可以尝试。)The table at caniuse指出,从版本9开始的IE支持TTF
是否可以在 Internet Explorer 中切换多个版本的 JDK/JRE? 想要使用 jdk 1.4、jdk 5 和 jdk 6。 谢谢,迈克尔 最佳答案 据我所知,这并不容易做到,因为 IE
这应该是IE8下载问题的老问题了。我使用 PHP 来设置响应头,如: header("Pragma: public"); header("Expires: 0"); header("Content-t
这个问题在这里已经有了答案: 10年前关闭。 Possible Duplicate: Running Internet Explorer 6, Internet Explorer 7, and Int
我正在使用新的Internet Explorer 11开发人员工具将文档模式切换为“8”,但条件注释仍然被忽略,也就是说,它们没有被正确解析并且表现得像普通注释。因此,浏览器不会请求/加载条件注释内的
我在我的一个站点上遇到 Internet Explorer 6 问题,我真的希望我安装它而不是 Internet Explorer 7。有没有一种快速的方法来做到这一点? 最佳答案 下载Microso
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and t
如何访问 Internet Explorer 运行实例的经典 Internet Explorer COM 自动化对象?也就是说,如果我在多个窗口中打开 Internet Explorer,如何从 Po
string filename = Server.UrlPathEncode(Path.GetFileName(_Filename))); Response.AddHeader("Content-Di
当我尝试使用 Apache 2.2 在 Windows7(64 位)上的 IE9 或 IE10 中打开 localhost 时,解析 URL 需要很长时间。其他浏览器没有问题并立即解析 URL,只有
我有一个批处理文件,必须启动 Internet Explorer 并打开 www.google.com .当整个页面加载完成时,它应该终止 IE 进程,即关闭该系统中的所有 IE 实例。我的批处理文件
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 6 个月前关闭。 Improve t
基本上,无论我使用 IE 访问哪个网站,我都可以看到那些黑色/白色形状,一旦我将鼠标移到它们上,它们就会消失。 想知道是否有人知道可能导致这种情况的原因? 另外:http://imageshack.c
我检查了所有注册表,但找不到所有已安装扩展的列表。 此时,IE 扩展/加载项的任何一般位置都会有所帮助。 最佳答案 取自 here : 浏览器帮助对象 - 旨在增强浏览器功能的浏览器插件。 条目可以在
这是一个两部分的问题。我正在构建一个网页,我需要知道: 有没有办法检测 IE 是否启用了平滑滚动(如果是,如何)? 有没有办法强制 IE 关闭我网页的平滑滚动功能? 明确地说,我不是在问如何关闭整个计
我是一名优秀的程序员,十分优秀!