change table column width

Question

I'm using react library that constructs table in the following template:

    <div class="table-container" style="width:100%">
    <table style="width:100%">
        <thead>
            <tr>
                <th>BLA_Column</th>
            </tr>
        </thead>
    </table>
    <table style="width:100%">
        <tbody>
            <tr>
                <td>BLA_Body</td>
            </tr>
        </tbody>
    </table>
</div>

I'm able to set the width of the th and the td to auto, but, the result is that I get two different sizes (one for the th and one for the td). When I try to use the following selector (for example), nothing happens:

table > thead > th {
    width: 100px;
}

Also when I try to change directly the width using the chrome dev-tools, there is no change at all.

Thanks ahead!

Answer 1

CSS character > select only direct childs. Change your CSS with :

table > thead th {
    width: 100px;
}

or

table > thead > tr > th {
    width: 100px;
}