我想轉(zhuǎn)換行和列（它是一個(gè)可 x 滾動的表）我的解決方案適用于 ie11 和 chrome，但這個(gè)不適用于 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貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊
我嘗試搜索，發(fā)現(xiàn) CSS 僅示例使用了IE 8 瀏覽器不支持的Flex和Grid 。
作為解決方法，您可以嘗試使用 Javascript 代碼將表行轉(zhuǎn)換為列。
例子：
<!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 關(guān)注
- 105 瀏覽
添加回答
舉報(bào)
0/150
提交
取消