Mini Table CSS - Mini responsive table using only css

style.css

div.table-mini-container {
    overflow: auto;
    min-width: 100px;
}

table.table-mini {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

table.table-mini th, table.table-mini td {
    border: 1px solid #ddd;
    padding: 0.1rem;
}

table.table-mini thead, table.table-mini tfoot {
    background-color: #f5f5f5;
}

table.table-mini > tbody > tr > td:first-child,
table.table-mini > tbody > tr > th:first-child,
table.table-mini > thead > tr > th:first-child,
table.table-mini > thead > tr > td:first-child,
table.table-mini > tfoot > tr > td:first-child,
table.table-mini > tfoot > tr > th:first-child {
    text-align: center;
    background-color: #f5f5f5;
}

table.table-mini > tbody > tr > td:not(:first-child) {
    min-width: 15px;
}

table.html

<div class="table-mini-container">
    <table class="table-mini">
        <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Mobile</th>
            <th>Address</th>
            <th>GUID</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Xerxes O. Haney</td>
            <td>+91 0231927076</td>
            <td>688-6000 Ipsum. Avenue</td>
            <td>2C70C849-9198-4C54-ACF7-083F9D58961B</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Lyle T. Solis</td>
            <td>+91 9497710194</td>
            <td>7422 Luctus Avenue</td>
            <td>37542DBF-A10F-D970-EF46-B5649A005C65</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Mobile</th>
            <th>Address</th>
            <th>GUID</th>
        </tr>
        </tfoot>
    </table>
</div>