![如何在ie8上转换表的行和列的滚动表]( "如何在ie8上转换表的行和列的滚动表")
本文介绍了如何在ie8上转换表的行和列的滚动表？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想转换行和列（这是x可滚动的表）
我的解决方案在ie11和chrome
上起作用，但是这个在ie8上不起作用
i必须使它在ie8
工作，但是我不知道如何使它工作...
我认为我必须更换 flex 到某事..
i用谷歌搜索它，但我找不到它...
请教我如何修复它。 。：（
table {display：-webkit-box; display：- ms-flexbox; overflow-x：自动； overflow-y：隐藏；} tbody {display：flex} th，td {display：block}
< html lang = en>< head>< meta charset = utf-8>< title> HTML< ; / title>< style>表{width：100％;} table，th，td {边框：1px实心#bcbcbc; }< / style> < / head> < body> < table> < thead> < tr> < col> / th < col> / th < col> / th < col> / th < / tr> < / thead> < tbody> < tr> <行< / th> < td> Dolor< / td> < td> Dolor< / td> < td> Dolor< / td> < / tr> < tr> <行< / th> < td> Dolor< / td> < td> Dolor< / td> < td> Dolor< / td> < / tr> < tr> <行< / th> < td> Dolor< / td> < td> Dolor< / td> < td> Dolor< / td> < / tr> < / tbody> < / table> < / body>< / html>
解决方案
我尝试搜索，发现仅CSS的示例使用 Flex 和 Grid ，而IE 8浏览器不支持。
作为解决方法，您可以尝试使用Javascript代码将表行转换为列。
示例：
<！doctype html>< html>< head>< style> #btn ，＃tbl2container {margin-top：10px;} td {padding：5px;边框：1像素，虚线为灰色；}< / style>< / head>< body>< div id = table_container> < table id = tbl1> < tr> < td> A1< td> < td> A2< td> < td> A3< td> < td> A4< td> < td> A5< td> < / tr> < tr> < td> B1< td> < td> B2< td> < td> B3< td> < td> B4< td> < td> B5< td> < / tr> < tr> < td> C1< td> < td> C2< td> < td> C3< td> < td> C4< td> < td> C5< td> < / tr> < / table>< / div><按钮id = btn onclick = clk（）>转换表< / button>< div id = tbl2container< / div><脚本>函数convertTable（tbl）{var行= tbl.rows.length; var cols = tbl.rows [0] .cells.length; var tbl2 = document.createElement（'table'）; for（var i = 0; i< cols; i ++）{var tr = document.createElement（’tr’）; for（var j = 0; j< rows; j ++）{var td = document.createElement（’td’）; var tdih = tbl.rows [j] .cells [i] .innerHTML; td.innerHTML = tdih; tr.appendChild（td）; } tbl2.appendChild（tr）; } return tbl2;} // testvar btn = document.getElementById（’btn’）; function clk（）{this.disabled = true; var t1 = document.getElementById（’tbl1’）; var t2 = convertTable（t1）; document.getElementById（'tbl2container'）。appendChild（t2）;}< / script>< / body>< / html>
在IE 11中以（IE 8）文档模式输出：
参考：
IE 8太旧了，超出了Microsoft的支持范围。如果可能，请尝试使用最新的Microsoft浏览器。如果必须使用IE浏览器，则至少应转到IE 11浏览器。
i want to convert row and column(it's a x-scrollable table)my solution works at ie11 and chromebut this one doesn't work at ie8i have to make this work at ie8but i have no idea how to make it work...
i think i have to replace flex to something..i googled about it but i couldn't find it...
please teach me how to fix it...:(
table{
display: -webkit-box;
display: -ms-flexbox;
overflow-x: auto;
overflow-y: hidden;
}
tbody
{display:flex}
th,td{display:block}
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
table {
width: 100%;
}
table, th, td {
border: 1px solid #bcbcbc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>col</th>
<th>col</th>
<th>col</th>
<th>col</th>
</tr>
</thead>
<tbody>
<tr>
<th>row</th>
<td>Dolor</td>
<td>Dolor</td>
<td>Dolor</td>
</tr>
<tr>
<th>row</th>
<td>Dolor</td>
<td>Dolor</td>
<td>Dolor</td>
</tr>
<tr>
<th>row</th>
<td>Dolor</td>
<td>Dolor</td>
<td>Dolor</td>
</tr>
</tbody>
</table>
</body>
</html>
解决方案
I tried to search and found that CSS only examples use Flex and Grid which is not supported in IE 8 browser.
As a workaround, you can try to use the Javascript code to convert table row to column.
Example:
<!doctype html>
<html>
<head>
<style>
#btn, #tbl2container {margin-top: 10px;}
td {
padding: 5px;
border: 1px dotted gray;
}
</style>
</head>
<body>
<div id="table_container">
<table id="tbl1">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
<td>A5</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
<td>B5</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
</tr>
</table>
</div>
<button id="btn" onclick="clk()">Convert Table</button>
<div id="tbl2container"></div>
<script>
function convertTable(tbl) {
var rows = tbl.rows.length;
var cols = tbl.rows[0].cells.length;
var tbl2 = document.createElement('table');
for (var i = 0; i < cols; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < rows; j++) {
var td = document.createElement('td');
var tdih = tbl.rows[j].cells[i].innerHTML;
td.innerHTML = tdih;
tr.appendChild(td);
}
tbl2.appendChild(tr);
}
return tbl2;
}
//test
var btn = document.getElementById('btn');
function clk() {
this.disabled = true;
var t1 = document.getElementById('tbl1');
var t2 = convertTable(t1);
document.getElementById('tbl2container').appendChild(t2);
}
</script>
</body>
</html>
Output in IE 11 with (IE 8) document mode:
Reference:
JSFiddle example
The IE 8 is too old and out of support scope of Microsoft. If possible then try to use the latest Microsoft browsers. If you have to use the IE browser then at least move to the IE 11 browser.
这篇关于如何在ie8上转换表的行和列的滚动表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！