如何在 ie8 中将表格行和列转换为滚动表？
[英]how can i convert table row and columns a scroll table at ie8?
问题描述
i want to convert row and column(it's a x-scrollable table) my solution works at ie11 and chrome but this one doesn't work at ie8 i have to make this work at ie8 but i have no idea how to make it work...
我想转换行和列（它是一个 x 可滚动表）我的解决方案在 ie11 和 chrome 上工作，但这个在 ie8 上不起作用我必须在 ie8 上工作，但我不知道如何使它工作。 ..
i think i have to replace flex to something.. i googled about it but i couldn't find it...我想我必须将flex替换为某些东西......我用谷歌搜索了它，但我找不到它......
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>
1 个解决方案
解决方案1
0 已采纳 2020-04-01 15:41:19
I tried to search and found that CSS only examples use Flex and Grid which is not supported in IE 8 browser.我尝试搜索并发现仅 CSS 示例使用了 IE 8 浏览器不支持的Flex和Grid 。
As a workaround, you can try to use the Javascript code to convert table row to column.作为解决方法，您可以尝试使用 Javascript 代码将表格行转换为列。
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:使用 (IE 8) 文档模式在 IE 11 中输出：
Reference:参考：
The IE 8 is too old and out of support scope of Microsoft. IE 8 太旧，超出了 Microsoft 的支持范围。 If possible then try to use the latest Microsoft browsers.如果可能，请尝试使用最新的 Microsoft 浏览器。 If you have to use the IE browser then at least move to the IE 11 browser.如果您必须使用 IE 浏览器，那么至少移动到 IE 11 浏览器。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.