我如何在 ie8 上将 table 行和列转换为滚动条 table？

Question

我想转换行和列（它是一个 x-scrollable table）我的解决方案适用于 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 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>

Answer 1

我尝试搜索，发现 CSS 只有示例使用 Flex 和 Grid，这在 IE 8 中不受支持浏览器。

作为解决方法，您可以尝试使用 Javascript 代码将 table 行转换为列。

示例：

<!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>

使用 (IE 8) 文档模式在 IE 11 中输出：

参考：

JSFiddle example

IE 8太旧，不在微软的支持范围内。如果可能，请尝试使用最新的 Microsoft 浏览器。如果你必须使用IE浏览器，那么至少移动到IE 11浏览器。

我如何在 ie8 上将 table 行和列转换为滚动条 table？

how can i convert table row and columns a scroll table at ie8?

html

css

cross-browser

internet-explorer-8

frontend