JSFiddle - React, Tailwind, and code Playground

HTML

<div class="around-content">
    Juste du contenu en float left pour vérifier que ça ne décale pas l'ensemble du contenu ou ne fait pas de choses trop bizarres...
</div>

<table>
    <thead>
        <tr>
            <th class="invisible empty">&nbsp;</th>
            <th>Test</th>
            <th>Test</th>
        </tr>           
    </thead>
    <tfoot>
        <tr>
            <th class="invisible empty">&nbsp;</th>
            <th>Test</th>
            <th>Test</th>
        </tr>
    </tfoot>
    <tbody><tr><td colspan="3"><div class="scroller"><table>
        <tr>
            <td class="invisible"><a>Muhahaha</a></td>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
        <tr>
            <td class="invisible"><a>Muhahaha</a></td>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
        <tr>
            <td class="invisible"><a>Muhahaha</a></td>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
        <tr>
            <td class="invisible"><a>Muhahaha</a></td>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
        <tr>
            <td class="invisible"><a>Muhahaha</a></td>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
        <tr>
            <td class="invisible"><a>Muhahaha</a></td>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
        <tr>
            <td class="invisible"><a>Muhahaha</a></td>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
        <tr>
            <td class="invisible"><a>Muhahaha</a></td>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
        <tr>
            <td class="invisible"><a>Muhahaha</a></td>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
        <tr>
            <td class="invisible"><a>Muhahaha</a></td>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
        <tr>
            <td...

CSS

.around-content {
    float: left;
    width: 125px;
    background: rgba(0, 0, 255, .2);
}

table {
    margin-left: -100px;
    position: relative;
    z-index: 10;
}

table table {
    margin-left: 0;
}

table thead th, table tfoot th {
    background: #ddd;
}

table .invisible {
    background: transparent;
    color: transparent;
}
table tr:hover > .invisible {
    color: blue;
    background: white;
}

table tr:hover > .invisible.empty {
    background: transparent;
}

table th, table td {
    width: 100px;
}
.scroller {
    max-height: 5em;
    overflow-y: scroll;
}