Set table width is not taking effect

I have a table, and I’m trying to set width to my columns.

enter image description here

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
    .myTable { width: 500px; }
    .myTable { background-color:#eee;border-collapse:collapse; }
    .myTable th { background-color:#000;color:white;width:50%; }
    .myTable td, .myTable th { padding:5px;border:1px solid #000; }
</style>

<!-- End Styles -->
<table class="myTable">


    <thead>
        <th width="5%">#</th>
        <th width="55%">Link</th>
        <th width="40%">Description</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>{{ env('APP_URL') }}/baby/{{ $baby->id }}?code={{ $baby->readOnlyCode }}</td>
            <td><p>You can open this Admin link on any devices that connect to your TV as dashboard.</p></td>
        </tr>
        <tr>
            <td>2</td>
            <td>{{ env('APP_URL') }}/baby/{{ $baby->id }}?code={{ $baby->readOnlyCode }}</td>
            <td><p>You may share this Read-Only link your anyone like friends, babysitters, or doctor.</p>
                <small>It will allow them to see {{ ucfirst($baby->babyName) }}'s data, but not able to update any logs or settings. </small>
            </td>
        </tr>
    </tbody>
</table>

Fiddle https://jsfiddle.net/bheng/nLa3so8f/4/

Answer

What you did here is, you have overridden your width by using a more specific CSS selector. Here .myTable th has more specificity than inline CSS styling <th width="5%">#</th>. If you simply remove width from .myTable th CSS selector, your columns would start honoring inline CSS width