如何在 ie8 将表格行和列转换为滚动表格？答案

【问题标题】：how can i convert table row and columns a scroll table at ie8?如何在 ie8 将表格行和列转换为滚动表格？
【发布时间】：2020-07-13 08:00:48
【问题描述】：

我想转换行和列（这是一个可滚动的表格）我的解决方案适用于 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>

【问题讨论】：

标签： html css cross-browser internet-explorer-8 frontend

【解决方案1】：

我尝试搜索，发现只有 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;
}

//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 的支持范围内。如果可能，请尝试使用最新的 Microsoft 浏览器。如果你必须使用 IE 浏览器，那么至少移动到 IE 11 浏览器。

【讨论】：