Estoy creando dinámicamente una tabla y quiero que el ancho de las columnas se reduzca/expanda al tamaño del contenido. he atado:

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

Y al crear las filas:

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

La mesa es:

 <!-- 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>

Esta es la tabla resultante: