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

Question

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

125 Views Asked by maria At 01 April 2020 at 14:21

i want to convert row and column(it's a x-scrollable table) my solution works at ie11 and chrome but this one doesn't work at ie8 i have to make this work at ie8 but i have no idea how to make it work...

i think i have to replace flex to something.. i googled about it but i couldn't find it...

please teach me how to fix it...:(

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>

Original Q&A

There are 1 best solutions below

**Deepak-MSFT** · Accepted Answer · 2020-04-01T15:41:19.517000

I tried to search and found that CSS only examples use Flex and Grid which is not supported in IE 8 browser.

As a workaround, you can try to use the Javascript code to convert table row to column.

Example:

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

Output in IE 11 with (IE 8) document mode:

Reference:

JSFiddle example

The IE 8 is too old and out of support scope of Microsoft. If possible then try to use the latest Microsoft browsers. If you have to use the IE browser then at least move to the IE 11 browser.

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

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in CROSS-BROWSER

Related Questions in INTERNET-EXPLORER-8

Related Questions in FRONTEND

Trending Questions

Popular # Hahtags

Popular Questions