HTML5表快速列调整大小

Question

我正在尝试调整表的数据列的大小，以下的JS工作但速度很慢。是否有更快的方法使用更好的选择器和更少的内循环？

JS：

var tbl = tblGlobalEvents;
var tblhr = tbl.children[0].children[0];
var tblb = tbl.children[1];
for (var c = 0; c < tblhr.children.length; c++) {
    var wh = $(tblhr.children[c]).width();
    for (var r = 0; r < tblb.children.length ; r++) {
        var td = tblb.children[r].children[c];
        $(td).width(wh);
        var p = tblb.children[r].children[c].children[0];
        $(p).width(wh);
    }
}

HTML：

<table id="tblGlobalEvents" class="dataTable" style="top:25px;height:90%;
     height:calc(100% - 30px)">
            <thead>
                <tr>
                    <th class="firstCol">EventNum</th>
                    <th style="min-width:150px">Date/Time</th>
                    <th>Source</th>
                    <th>Service Provider</th>
                    <th>Droid Location</th>
                    <th>Event Type</th>
                    <th>Device IP</th>
                    <th>Device MAC</th>
                    <th>Details</th>
                    <th>Username</th>
                    <th class="lastCol">Connection</th>
                </tr>
            </thead>
            <tbody id="tbTest">
            </tbody>
</table>

我想在纯CSS中做，但无法弄清楚如何... CSS：

.dataTable {
cursor: default;
border-collapse: collapse;
position: absolute;
width: 100%;
height: 100%;
}

.dataTable thead {
    position: absolute;
    left: 5px;
    right: 5px;
    padding: 0px 18px 0px 0px;
    cursor: pointer;
}

.dataTable tbody {
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    top: 24px;
    bottom: 5px;
    left: 5px;
    right: 5px;
}

    .dataTable tbody p {
        max-height: 34px;
        overflow:hidden;
    white-space: nowrap;
    }

    .dataTable tbody tr:nth-child(2n) {
        background: rgba(65, 201, 255, 0.15);
    }

    .dataTable tbody tr:hover {
        background: rgba(30, 139, 187, 0.45);
    }

    .dataTable tbody tr:active {
        background: rgba(30, 139, 187, 0.75);
    }

.dataTable th {
    background: rgba(25, 156, 213, 0.99);
    background-repeat: no-repeat;
    background-position: center right;
    color: whitesmoke;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    text-shadow: 0 0 3px black;
    padding: 2px 20px 2px 10px;
    height: 20px;
    width: 2%;
    white-space: nowrap;
}

    .dataTable th.firstCol {
        border-radius: 10px 0 0 0;
    }

    .dataTable th.lastCol {
        border-radius: 0 10px 0 0;
        border-right: 0px;
    }

.dataTable td {
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    width: 2%;
    text-align: left;
    padding: 2px 20px 2px 10px;
}

    .dataTable td.firstCol {
        border-left: 1px solid black;
    }