The problem is the `table-layout: fixed` rule that you added to the `table` tag, just remove it. From [w3schools](https://www.w3schools.com/cssref/pr_tab_table-layout.asp):

> `fixed`: Fixed table layout algorithm:
> 
>- **The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells**
>- Allows a browser to lay out the table faster than the automatic table layout
>- The browser can begin to display the table once the first row has been received








    table {
        border-collapse: collapse;
        border-spacing: 0;
        /*table-layout: fixed;*/
    }

    table th {
        background: lightblue;
    }

    table th, table td {
        border: lightgrey 1px solid;
        padding: .1em 0.2em;
    }



    <h4>Width Not Set</h4>

    <table id="example1" >
      <thead>
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th>Start</th>
          <th>Stop</th>
          <th>View</th>
          <th>Edit</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Regular Size Name</td>
          <td>Order</td>
          <td>01/01/2017</td>
          <td>02/02/2017</td>
          <td><a href="#View">View</a></td>
          <td><a href="#Edit">Edit</a></td>
        </tr>
        <tr>
          <td>Pretty Long Name Size Actually</td>
          <td>Adjustment</td>
          <td>01/01/2017</td>
          <td>04/03/2018</td>
          <td><a href="#View">View</a></td>
          <td><a href="#Edit">Edit</a></td>
        </tr>
        <tr>
          <td>Regular Size Name</td>
          <td>Adjustment</td>
          <td>08/01/2017</td>
          <td>02/02/2019</td>
          <td><a href="#View">View</a></td>
          <td><a href="#Edit">Edit</a></td>
        </tr>
        <tr>
          <td>Pretty Long Name Size Actually</td>
          <td>Order</td>
          <td>08/01/2017</td>
          <td>02/02/2019</td>
          <td><a href="#View">View</a></td>
          <td><a href="#Edit">Edit</a></td>
        </tr>
      </tbody>
    </table>


    <h4>Width 100%</h4>

    <table id="example2" style="width:100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th>Start</th>
          <th>Stop</th>
          <th>View</th>
          <th>Edit</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Regular Size Name</td>
          <td>Order</td>
          <td>01/01/2017</td>
          <td>02/02/2017</td>
          <td><a href="#View">View</a></td>
          <td><a href="#Edit">Edit</a></td>
        </tr>
        <tr>
          <td>Pretty Long Name Size Actually</td>
          <td>Adjustment</td>
          <td>01/01/2017</td>
          <td>04/03/2018</td>
          <td><a href="#View">View</a></td>
          <td><a href="#Edit">Edit</a></td>
        </tr>
        <tr>
          <td>Regular Size Name</td>
          <td>Adjustment</td>
          <td>08/01/2017</td>
          <td>02/02/2019</td>
          <td><a href="#View">View</a></td>
          <td><a href="#Edit">Edit</a></td>
        </tr>
        <tr>
          <td>Pretty Long Name Size Actually</td>
          <td>Order</td>
          <td>08/01/2017</td>
          <td>02/02/2019</td>
          <td><a href="#View">View</a></td>
          <td><a href="#Edit">Edit</a></td>
        </tr>
      </tbody>
    </table>

The default html `<table>` element seems to set column width how I want/expect straight out of the box.  The problem occurs when I try to set the entire table width to 100%, in which case each of the reasonably sized columns snap to an equal 1/n % of the total width.  

Here's an example of what I'm talking about

[![example of width sizing][small demo]][large demo]

The second table looks terrible.  There is absolutely no need to start wrapping text in the first column, especially when there is now *more* available room.

The only difference is that the second table is set to `width:100%`.  Of course you can set exact pixel or percentage dimensions on each of the columns to scale relative to each other, but that starts hard coding some guess work as to how big each of the columns will be.  In this case, columns with only *View* or *Edit* links can be sized incredibly small and don't need to take up any extra with, while some could use a little more room to grow, like Name/Type that might have other longer/shorter values.

Q: Can I somehow maintain the proportional column formating while allowing the entire table to be sized at 100% of the available width?

### [Demo in jsFiddle][fiddle]

### Demo in Stack Snippets





    table {
        border-collapse: collapse;
        border-spacing: 0;
        table-layout: fixed;
    }

    table th {
        background: lightblue;
    }

    table th, table td {
        border: lightgrey 1px solid;
        padding: .1em 0.2em;
    }



    <h4>Width Not Set</h4>

    <table id="example1" >
      <thead>
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th>Start</th>
          <th>Stop</th>
          <th>View</th>
          <th>Edit</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Regular Size Name</td>
          <td>Order</td>
          <td>01/01/2017</td>
          <td>02/02/2017</td>
          <td><a href="#View">View</a></td>
          <td><a href="#Edit">Edit</a></td>
        </tr>
        <tr>
          <td>Pretty Long Name Size Actually</td>
          <td>Adjustment</td>
          <td>01/01/2017</td>
          <td>04/03/2018</td>
          <td><a href="#View">View</a></td>
          <td><a href="#Edit">Edit</a></td>
        </tr>
        <tr>
          <td>Regular Size Name</td>
          <td>Adjustment</td>
          <td>08/01/2017</td>
          <td>02/02/2019</td>
          <td><a href="#View">View</a></td>
          <td><a href="#Edit">Edit</a></td>
        </tr>
        <tr>
          <td>Pretty Long Name Size Actually</td>
          <td>Order</td>
          <td>08/01/2017</td>
          <td>02/02/2019</td>
          <td><a href="#View">View</a></td>
          <td><a href="#Edit">Edit</a></td>
        </tr>
      </tbody>
    </table>


    <h4>Width 100%</h4>

    <table id="example2" style="width:100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th>Start</th>
          <th>Stop</th>
          <th>View</th>
          <th>Edit</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Regular Size Name</td>
          <td>Order</td>
          <td>01/01/2017</td>
          <td>02/02/2017</td>
          <td><a href="#View">View</a></td>
          <td><a href="#Edit">Edit</a></td>
        </tr>
        <tr>
          <td>Pretty Long Name Size Actually</td>
          <td>Adjustment</td>
          <td>01/01/2017</td>
          <td>04/03/2018</td>
          <td><a href="#View">View</a></td>
          <td><a href="#Edit">Edit</a></td>
        </tr>
        <tr>
          <td>Regular Size Name</td>
          <td>Adjustment</td>
          <td>08/01/2017</td>
          <td>02/02/2019</td>
          <td><a href="#View">View</a></td>
          <td><a href="#Edit">Edit</a></td>
        </tr>
        <tr>
          <td>Pretty Long Name Size Actually</td>
          <td>Order</td>
          <td>08/01/2017</td>
          <td>02/02/2019</td>
          <td><a href="#View">View</a></td>
          <td><a href="#Edit">Edit</a></td>
        </tr>
      </tbody>
    </table>




  [small demo]: https://i.stack.imgur.com/a9YEW.png
  [large demo]: https://i.stack.imgur.com/lZeXY.png
  [fiddle]: https://jsfiddle.net/KyleMit/dabpc4sL/