how can i convert table row and columns a scroll table at ie8?
Question
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...
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>
1 answers
solution1
0 ACCPTED 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.
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:
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.