Is there simpler way to truncate strings in middle when table is resized?

I am trying to make a prototype of file browser on web, and it has a table that shows list of files. I want to make the table flexible, to adjust column widths according to screen width and able to truncate file names to show only 1-line texts in cells. And I want it truncate the strings in the middle, not in tails, to show file name extensions.

I was able to make a code with some research. But the problem is that, the code seems too heavy so when I tested it makes web view slow and crash sometime. Is there any way simpler to bring out same result?

• When screen is resized and I call the width value of table cell, the number never goes below certain number - but visually the width is smaller than the number. Can you inform me what is causing that problem?

HTML

<table id = "listTable">
    <tr class = "listTable_firstRow">
        <th style = "width: 54px;"><img src="assets/unchecked.png" style = "width: 16px; display: table-cell; margin: auto;" id = "tableSelAll"></th>
        <th style = "width: 54px;">Type</th>
        <th style = "text-align: left;padding-left: 18px; min-width: 0px;">Name</th>
        <th style = "width: 12%; min-width: 72px;">Owner</th>
        <th style = "width: 12%; min-width: 72px;">Last modified</th>
        <th style = "width: 12%; min-width: 72px;">Updated</th>
        <th style = "width: 12%; min-width: 72px;">File size</th>
    </tr>
</table>

JAVASCRIPT

function getvisualLength(target){
    var ruler = document.getElementById("ruler");
    ruler.innerHTML = target;
    return ruler.offsetWidth;
}
function getTrimmedString(targetString, targetWidth){
    var tmp = targetString;
    var tail = targetString.substr(targetString.indexOf('.')-3);
    var truncLength = getvisualLength("...");
    var tailLength = getvisualLength(truncLength);

    if (getvisualLength(tmp) > targetWidth){
        while (getvisualLength(tmp) > (targetWidth-(truncLength+tailLength+10))){
            tmp = tmp.substr(0, tmp.length-1);
        }
    }

    else{
        return tmp;
    }

    return tmp+"..."+tail;
}
window.addEventListener("resize", function(){
    var table = document.getElementById("listTable");
    for (var i = 4; i < table.rows.length; i++){
        var getCellWidth = document.getElementById("listTable").rows[0].cells[2].offsetWidth;
        var str = files[i][0];
        var tmp = getTrimmedString(str, getCellWidth);
        document.getElementById("listTable").rows[i].cells[2].innerHTML = tmp;
    }
});
function addListToTable(target, list){
    var table = document.getElementById(target);
    for (var i=0; i<list.length; i++){
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var getIconSource;

        row.style.cssText = "height:41px; border-bottom: 1px solid #f4f4f4";

        for (var k=0; k<thmbIconList.length; k++){
            if (thmbIconList[k][0] == list[i][2]){
                getIconSource = thmbIconList[k][1];
            }
        }
        row.clickStat = "off";
        row.id = "tableRow";
        var checkbox = row.insertCell(0);
        var type = row.insertCell(1);
        var name = row.insertCell(2);
        var owner = row.insertCell(3);
        var lastmodified = row.insertCell(4);
        var update = row.insertCell(5);
        var size = row.insertCell(6);
        checkbox.innerHTML = "<img src=\"assets/unchecked.png\" style = \"width: 16px; display: table-cell; margin: auto;\">"
        type.innerHTML = "<img src=\""+getIconSource+"\"style = \"width: 20px; display: table-cell; margin: auto;\">"
        name.innerHTML = list[i][0];
        name.style.cssText = "display: block;"
        name.style.cssText = "text-align: left; padding-left: 18px";
        owner.innerHTML = "me";
        owner.style.cssText = "min-width: 72px; text-align: center"
        lastmodified.innerHTML = list[i][1];
        lastmodified.style.cssText = "min-width: 72px; text-overflow:ellipsis; overflow: hidden; white-space: nowrap; text-align: center";
        update.innerHTML = list[i][1];
        update.style.cssText = "min-width: 72px; text-align: center";
        size.innerHTML = list[i][3];
        size.style.cssText = "min-width: 72px;text-align: center";        
    }
}
addListToTable("listTable", folders);
addListToTable("listTable", files);

var folders = [["Documents", "Oct 24 2019", "folder","-"], ["MyFolder_1", "Jan 2 2019", "folder","-"], ["MyFolder_2", "Oct 1 2019", "folder","-"]]
var files = [["description20191025.docx","Oct 25 2019","word", "20MB"], ["description20191025.pptx","Oct 25 2019","ppt", "20MB"], ["description20191025.xlsx","Oct 25 2019","excel", "20MB"], ["nppt_slideBackup.nppt","Oct 25 2019","nppt", "20MB"],["7D65EC6E-4A3882CF.png", "Oct 21 2019", "img", "128MB"], ["photo-153855424537648538.png", "Oct 17 2019", "img", "1.2MB"], ["photo-1538537642458538.png", "Oct 17 2019", "img", "20MB"], ["photo-15385376424548538.png", "Oct 17 2019", "img", "128MB"], ["photo-15385376425248538.png", "Oct 17 2019", "img", "1.2MB"]]

CSS

#ruler { visibility: hidden; white-space: nowrap; }
#listTable{
    width: calc(100% - 20px);
    border-collapse: collapse;
}
.listTable_firstRow{
    height: 41px;
    border-bottom: 1px solid #d8d8d8;
}