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; }

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

        <th width="5%">#</th>
        <th width="55%">Link</th>
        <th width="40%">Description</th>
            <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>
            <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>



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