如何在 ie8 中将表格行和列转换为滚动表格？
我想转换行和列（它是一个可 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
我尝试搜索，发现 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;}//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>
随时随地看视频慕课网APP
相关分类
Html5