Как я могу преобразовать строки таблицы и столбцы таблицы прокрутки в ie8? - PullRequest
Новая
       77

Как я могу преобразовать строки таблицы и столбцы таблицы прокрутки в ie8?

0 голосов
/ 01 апреля 2020

Я хочу преобразовать строку и столбец (это таблица с 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>

1 Ответ

0 голосов
/ 01 апреля 2020

Я попытался выполнить поиск и обнаружил, что CSS только в примерах используются Flex и Grid , которые не поддерживаются в браузере IE 8.

Как Обходной путь, вы можете попробовать использовать код 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 11 с (IE 8) режимом документа:

enter image description here

Ссылка:

Пример JSFiddle

IE 8 слишком старый и выходит за рамки поддержки Microsoft. Если возможно, попробуйте использовать последние версии браузеров Microsoft. Если вам нужно использовать браузер IE, то хотя бы перейдите в браузер IE 11.

...