如何在 IE8 中将表格行和列转换为滚动表？-解网

问：

我想转换行和列（这是一个 X 可滚动的表格）我的解决方案适用于 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 跨浏览器 Internet-Explorer-8 前端

<!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 11 和（IE 8）文档模式下输出：

参考：

JSFiddle 示例

IE 8太旧了，超出了Microsoft的支持范围。如果可能，请尝试使用最新的 Microsoft 浏览器。如果您必须使用 IE 浏览器，那么至少要迁移到 IE 11 浏览器。

上一个：Internet Explorer 11：打印功能创建空白页

下一个：尝试防止在旧版本的 Internet Explorer 中按输入类型文本时按回车键重新加载页面

如何在 IE8 中将表格行和列转换为滚动表？

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

评论