Перемещение границы влево вверх без изменения текста рядом с ним добавил код

Question

Я хочу переместить эту серую рамку вверх на красную точку, не затрагивая слова рядом с ней.

Кстати на JS Скрипка может показаться нормальной, но я использую стол в другом месте, поэтому он падает. Я добавил каждую деталь, но она все еще не позволяет мне публиковать.

https://jsfiddle.net/ctrs74yb/

.table { width: 100%; } 
.table td, 
.table th { width: calc(100% / 8); } 
.table tr { text-align: left; } 
.table th { /* style however you like for the header row here */ font-weight: bold; font-size: 18px; } /* use n-th child value select which column you'd like to style differently from default */ .table td:nth-child(5), 
.table th:nth-child(5) { text-align: left; } 
.table td:nth-child(2), 
.table th:nth-child(2) { text-align: left; } 
.testline { border-left: 1px solid grey; border-right: 1px solid grey; height: 700px; line-height:30px; } 
.testline2 { border-left: 1px solid grey; height: 700px; line-height:30px; top: 100px; }

    <div id="title">
        <table class="table">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Money</th>
                <th>Job</th>
                <th>Group</th>
                <th>WP</th>
                <th>Ping</th>
                <th>Country</th>
            </tr>
        </table>

        <table class="table" style="color: rgb(' .. r .. ', ' .. g .. ', ' .. b .. ')">
            <td>' ..playerID.. '</td>
            <td>' .. sanitize(name) .. '</td>
            <td div class="testline2">' .. (money) .. '</td>
            <td div class="testline">' .. job .. '</td>
            <td div class="testline2">' .. group .. '</td>
            <td div class="testline2">' .. wantedLevel .. '</td>
            <td div class="testline2">' .. ping .. '</td>
            <td div class="testline2">' .. country .. '</td>
        </table>

изображение, показывающее красную точку