Home>
.table {
    display: block;
    position: relative;
    overflow: scroll;
    width: calc (100%);
    height: calc (100vh);
    border-collapse: collapse;
    font-size: 0;
}

I'm trying to scroll the protruding cell so that the cell doesn't wrap like this,
If i check with the PC of windows, the protruding cell will be broken.
(It is not the wrapping of the text in the cell, but the wrapping of the cell itself)
In the editing PC (mac), the cells are displayed properly without being folded.

I don't know why and how to fix it.

Additional
A functioning browser: Safari Ver.11.1.2
Browser where the problem was confirmed: Internet Explorer Ver.11.0.70

It's long, but now it looks like this.

HTML

<div>
    <div>
        <table>
            <thead>
            <tr>
                <th data-sort = "no">No.</th>
                <th data-sort = "img">Image</th>
                <th data-sort = "name">name</th>
                <th data-sort = "a">A</th>
                <th data-sort = "b">B</th>
                <th data-sort = "c">C</th>
                <th data-sort = "d">D</th>
                <th data-sort = "e">E</th>
                <th data-sort = "f">F</th>
                <th data-sort = "g">G</th>
                <th data-sort = "h">H</th>
                <th data-sort = "i">I</th>
                <th data-sort = "j">J</th>
                <th data-sort = "k">K</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th>0</th>
                <th><p>-</p></th>
                <th>banana</th>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
            </tr>
            <tr>
                <th>0</th>
                <th><p>-</p></th>
                <th>apple</th>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
            </tr>
            <tr>
                <th>0</th>
                <th><p>-</p></th>
                <th>mandarin</th>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>


JavaScript

<script src = "https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script>
    var options = {
    valueNames: ['no', 'img', 'name', 'a', 'b', 'c', 'd', 'e', ​​'f', 'g', 'h', 'i' , 'j', 'k',]
    };
    var userList = new List ('users', options);
    userList.sort ('', {order: 'asc'});
</script>
<style>
    .sort.desc: after {
        content: "▼";
    }
    .sort.asc: after {
        content: "▲";
    }
</style>

CSS

<style b = "text/css">
/ * example_table * /
.example_table {
    display: block;
    position: relative;
    overflow: scroll;
    width: calc (100%);
    height: calc (100vh);
    border-collapse: collapse;
    font-size: 0;
}
/ * example_table cell * /
.example_table th,
.example_table td {
    display: inline-block;
    height: 3.0rem;
    background: #fff;
    font-size: 0.7rem;
    white-space: nowrap;
}
/ * Image size * /
img.exampleicon {
    width: 3.0rem;
}
/ * example_table row * /
.example_table thead,
.example_table tbody {
    display: block;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}
.example_table tbody th {
    position: -webkit-sticky;
    position: sticky;
    z-index: 1;}
.example_table thead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 4;
}
/ * example_table column * /
.example_table th.no,
.example_table td.no {
    display: inline-block;
    width: 1.3rem;
    line-height: 3.0rem;
    background: #fff;
    left: 0rem;
    z-index: 2;
}
.example_table th.img,
.example_table td.img {
    display: inline-block;
    width: 3.0rem;
    line-height: 3.0rem;
    background: #fff;
    left: 0rem;
    z-index: 2;
}
.example_table th.name,
.example_table td.name {
    display: inline-block;
    width: 10.0rem;
    line-height: 3.0rem;
    background: #fff;
    z-index: 1;
}
.example_table th.a,
.example_table td.a {
    display: inline-block;
    width: 2.5rem;
    line-height: 3.0rem;
    background: #fff;
    left: 0rem;
    z-index: 1;
}
.example_table th.b,
.example_table td.b {
    display: inline-block;
    width: 2.0rem;
    line-height: 3.0rem;
    background: #fff;
}
.example_table th.c,
.example_table td.c {
    display: inline-block;
    width: 2.0rem;
    line-height: 3.0rem;
    background: #fff;
}
.example_table th.d,
.example_table td.d {
    display: inline-block;
    width: 1.3rem;
    line-height: 3.0rem;
    background: #fff;
}

.example_table th.e,
.example_table td.e {
    display: inline-block;
    width: 1.3rem;
    line-height: 3.0rem;
    background: #fff;
}
.example_table th.f,
.example_table td.f {
    display: inline-block;
    width: 1.3rem;
    line-height: 3.0rem;
    background: #fff;
}
.example_table th.g,
.example_table td.g {
    display: inline-block;
    width: 1.3rem;
    line-height: 3.0rem;
    background: #fff;
}
.example_table th.h,
.example_table td.h {
    display: inline-block;
    width: 1.3rem;
    line-height: 3.0rem;
    background: #fff;
}

.example_table th.i,
.example_table td.i {
    display: inline-block;
    width: 1.3rem;
    line-height: 3.0rem;
    background: #fff;
}
.example_table th.j,
.example_table td.j {
    display: inline-block;
    width: 1.3rem;
    line-height: 3.0rem;
    background: #fff;
}
.example_table th.k,
.example_table td.k {
    display: inline-block;
    width: 1.3rem;
    line-height: 3.0rem;
    background: #fff;
}

/ * example_table column fixed location * /

.example_table thead th.blank-no {
    position: -webkit-sticky;
    position: sticky;
    width: 1.3rem;
    line-height: 3.0rem;
    top: 0;
    left: 0;
    z-index: 4;
}
.example_table thead th.blank-img {
    position: -webkit-sticky;
    position: sticky;
    width: 3.0rem;
    line-height: 3.0rem;
    top: 0;
    left: 0;
    z-index: 5;
}
.example_table thead th.blank-name {
    position: -webkit-sticky;
    position: sticky;
    width: 10.0rem;
    line-height: 3.0rem;
    top: 0;
    left: 0rem;
    z-index: 4;
}

</style>
</head>


CSS design part

/* Design * /
/ * design * /
body {
    font-family: 'Noto Sans', sans-serif;
    padding: .3rem;
}
/ * Shadow around the box * /
.example_table {
    box-shadow: 0 1px 3px rgba (0, 0, 0, 0.12), 0 1px 2px rgba (0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier (0.25, 0.8, 0.25, 1);
}
.example_table: hover {
    box-shadow: 0 14px 28px rgba (0, 0, 0, 0.25), 0 10px 10px rgba (0, 0, 0, 0.22);
}

.example_table table {
    border: 1px solid # CFD8DC;
}

/ * Design cell * /
.example_table th {
    font-weight: bold;
}
.example_table td {
    font-weight: normal;
    text-align: center;
}
/ * Design tbody th * /
.example_table tbody th.no {
    text-align: center;
}
.example_table tbody th.img {
    text-align: center;
}
.example_table tbody th.name {
    text-align: center;
}
.example_table tbody th.a {
    text-align: center;
}
.example_table thead th {
    background: # 000000;
    color: # E0E0E0;
    text-align: center;
}
/ * Design thead th * /
.example_table thead th.no {
    background: # 000000;
    color: # E0E0E0;
    font-weight: bold;
    text-align: center;
}
.example_table thead th.img {
    background: # 000000;
    color: # E0E0E0;
    font-weight: bold;
    text-align: center;
}
.example_table thead th.name {
    background: # 000000;
    color: # E0E0E0;
    font-weight: bold;
    text-align: center;
}
.example_table thead th.a {
    background: # 000000;
    color: # E0E0E0;
    font-weight: bold;
    text-align: center;
}
.example_table thead th.b {
    background: # 000000;
    color: # E0E0E0;
    font-weight: bold;
    text-align: center;
}
.example_table thead th.c {
    background: # 000000;
    color: # E0E0E0;
    font-weight: bold;
    text-align: center;
}
.example_table thead th.d {
    background: # 000000;
    color: # E0E0E0;
    font-weight: bold;
    text-align: center;
}
.example_table thead th.e {
    background: # 000000;
    color: # E0E0E0;
    font-weight: bold;
    text-align: center;
}
.example_table thead th.f {
    background: # 000000;
    color: # E0E0E0;
    font-weight: bold;
    text-align: center;
}
.example_table thead th.g {
    background: # 000000;
    color: # E0E0E0;
    font-weight: bold;
    text-align: center;
}
.example_table thead th.h {
    background: # 000000;
    color: # E0E0E0;
    font-weight: bold;
    text-align: center;
}
.example_table thead th.i {
    background: # 000000;
    color: # E0E0E0;
    font-weight: bold;
    text-align: center;
}
.example_table thead th.j {
    background: # 000000;
    color: # E0E0E0;
    font-weight: bold;
    text-align: center;
}
.example_table thead th.k {
    background: # 000000;
    color: # E0E0E0;
    font-weight: bold;
    text-align: center;
}
.example_table tbody tr: nth-child (even) th {
    background: # 222222;
    color: #FFFFFF;
}
.example_table tbody tr: nth-child (even) td {
    background: # f0f0f0;
}
.example_table tbody tr: nth-child (odd) th {
    background: # 222222;
    color: #FFFFFF;
}
.example_table tbody tr: nth-child (odd) td {
    background: #FAFAFA;
}