我想转换行和列（它是一个可 x 滚动的表）我的解决方案适用于 ie11 和 chrome，但这个不适用于 ie8 我必须使其在 ie8 上工作，但我不知道如何使其工作。 ..我想我必须更换flex一些东西..我用谷歌搜索它但我找不到它......请教我如何解决它...:(table{display: -webkit-box;display: -ms-flexbox;overflow-x: auto;overflow-y: hidden;}tbody{display:flex}th,td{display:block}<html> <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>
1 回答
德玛西亚99
TA贡献1770条经验 获得超3个赞
我尝试搜索，发现 CSS 仅示例使用了IE 8 浏览器不支持的Flex和Grid 。
作为解决方法，您可以尝试使用 Javascript 代码将表行转换为列。
例子：
<!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>
- 1 回答
- 0 关注
- 73 浏览
添加回答
举报
0/150
提交
取消