代码之家 › 专栏 › 技术社区 › Glyn

设置动态创建的表的列宽以适应内容

css html javascript

Glyn · 技术社区 · 4 年前

我正在动态创建一个表,我希望列宽缩小/扩展到内容的大小。我打了个平手:

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

创建行时:

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

表格如下:

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

这是结果表: