程序员
输入您的需求,我来帮您实现
好的,以下是实现js表格宽度的代码:
HTML代码:
<table id="myTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</tbody>
</table>
JavaScript代码:
var table = document.getElementById("myTable");
var tableWidth = table.offsetWidth;
var columnCount = table.getElementsByTagName("tr")[0].getElementsByTagName("th").length;
var columnWidth = tableWidth / columnCount;
for (var i = 0; i < columnCount; i++) {
table.getElementsByTagName("th")[i].style.width = columnWidth + "px";
for (var j = 0; j < table.getElementsByTagName("tr").length; j++) {
table.getElementsByTagName("tr")[j].getElementsByTagName("td")[i].style.width = columnWidth + "px";
}
}
这段代码会自动计算表格的宽度,并将每一列的宽度设置为相等的值。您只需要将表格的ID设置为“myTable”,并将代码复制粘贴到您的HTML文件中即可。