Possible to make fixed headers inherit width property

Question

I have a table that has a fixed header row. When fixed is disabled the width spaces itself correctly, but it is not longer fixed, and will scroll out of the container div. Once fixed is added to the property, it scrolls correctly but the width does not line up. With this given scenario is it possible to make the widths line up while still using this 'fixed' property?

    .container {
        border: 1px solid black;
        height: 100px;
        overflow-y: scroll;
    }
    td {
        font-size: 40px;
    }  
     table {
        table-layout: fixed;
        height: 100%;
    }
    thead{
        position:fixed;
    }

<div class="container">
    <table>
        <thead>
            <tr>
                <th>
                    header
                </th>
                <th>
                    header
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    data
                </td>
                <td>
                    data
                </td>
            </tr>
            <tr>
                <td>
                    data
                </td>
                <td>
                    data
                </td>
            </tr>
            <tr>
                <td>
                    data
                </td>
                <td>
                    data
                </td>
            </tr>
        </tbody>
    </table>
</div>

jsFiddle: https://jsfiddle.net/meeow314159/3vs9bmsf/2/

Answer 1

No it is not possible. Because it won't leave space for the element, therefore it doesn't have the inherit width

According to MDN

fixed

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page. This value always create a new stacking context.

See specs about fixed positioning