CSS: Table Data doesn't line up with Table Header-CodePudding

I'm trying to make a responsive table with css and html as seen in this Image. You can see that the headers don't line up with the data at all. I have tried everything like putting thead, tbody, tr and td or text-align center but nothing worked. If you know how to align it right please tell me. Thanks in advance.

HTML:

<div class="container panel">
    <h1 class="panel__title"><i class="fas fa-info-circle"></i> Relay Information</h1>
    <table class="panel__table">
        <thead>
            <tr>
                <th>Hop</th>
                <th>From</th>
                <th>By</th>
                <th>With</th>
                <th>Time</th>
            </tr>
        </thead>
        <tbody id="hops">
            <tr>
                <td>1</td>
                <td>-</td>
                <td>10.140.188.3</td>
                <td>HTTP</td>
                <td>Tue, 25 Jan 2011 15:30:58 </td>
            </tr>
            <tr>
                <td>2</td>
                <td>-</td>
                <td>10.141.116.17</td>
                <td>SMTP</td>
                <td>Tue, 25 Jan 2011 15:30:58 </td>
            </tr>
            <tr>
                <td>3</td>
                <td>-</td>
                <td>po-out-1718.google.com</td>
                <td>SMTP</td>
                <td>Tue, 25 Jan 2011 15:30:58 </td>
            </tr>
            <tr>
                <td>4</td>
                <td>po-out-1718.google.com (72.14.252.155:54907)</td>
                <td>cl35.gs01.gridserver.com</td>
                <td>ESMTP</td>
                <td>Tue, 25 Jan 2011 15:31:01 </td>
            </tr>
        </tbody>
    </table>
</div>

CSS:

.panel {
    margin: 20px auto;
}

.panel__title {
    width: 100%;
    background-color: var(--primary-color);
    color: #fff;
    padding: 10px 0 10px 25px;
    border-radius: 25px 25px 0 0;
}

.panel__table {
    display: block;
    overflow-x: auto;

    border-spacing: 0;
    border: 3px solid var(--primary-color);
    border-radius: 0 0 25px 25px;
    padding: 13px;
}

table tbody {
    display: table;
    width: 100%;
}

.panel__table th,
.panel__table td {
    text-align: left;
    padding: 16px;
}

.panel__table td {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.panel__table tr:nth-child(even) {
    background-color: #f5f5f5;
}

CodePudding user response：

The problem comes from this style:

table tbody {
    display: table;
}

Just remove it.