I am struggling to create a table where the first column is sized to fit the content and the rest of columns are of equal width to fill the rest of the container.

For now, I was able to make all columns of equal width (see below). But I would like the first column to be wider if needed (of minimal width to fit all content) to accommodate its content. Is it possible?

Below is an illustration of the problem:

```css
    table {  
      table-layout: fixed;
      width: 100%;
    }

    table > tbody > tr > th {
        white-space: nowrap;
    }
```

```html
<table border="1">
    <caption>Table Name</caption>
     <thead>
       <tr>
         <th></th>
         <th>Col 1</th>
         <th>Col 2</th>
         <th>Col 3</th>
       </tr>   
     </thead>
     <tbody>
       <tr>
         <td>Long Row header</td>
         <td>1</td>
         <td>2</td>
         <td>3</td>
       </tr>
       <tr>
         <td>Row 2</td>
         <td>1</td>
         <td>2</td>
         <td>3</td>
       </tr>   
     </tbody>
    </table>
```

Fiddle : <https://jsfiddle.net/orlenok41/jubkmgva/11/>