I am dynamically creating a table and I want the column widths to shrink/expand to the size of the contents. I have tied:

#parTable tr td {
    width: 1%;
    white-space: nowrap;
}

And when creating the rows:

html += "<tr>"
html += "<td style='width : 1%; white-space: nowrap;'><input type='text' name='patparId' value='' disabled></td>";

html += "<td style='width : 1%; white-space: nowrap;'><select name='parRating'>"
for (let i = 0; i <= paraArray; i++) {
    html += "<option name='parRatingOption' data-index='" + i + "' value='" + parIdArray[i] + "'>" + parRatingArray[i] + "</option>"
};
html += "</select></td>";

html += "<td style='width : 1%; white-space: nowrap;'><input type='date' name='startDate' value=''></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='date' name='endDate' value=''></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='text' name='parDescription' class='fullWidth' value='" + parDescriptionArray[0] + "'></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='button' name='addPARbtn' class='btn-info' value='Add'></td>";
html += "</tr>";

The table is:

<!-- PAR table -->
<table class="table table-hover table-bordered" id="parTable">
    <thead>
        <tr>
          <th>patparId</th>
          <th>PAR</th>
          <th>Start Date</th>
          <th>End Date</th>
          <th>Description</th>
        </tr>
    </thead>
    
    <tbody id="parTablebody">
        <tr>
            <!-- Place for PAR details -->
        </tr>
    </tbody>                
</table>

This is the resulting table: