<!DOCTYPE html> <html> <head> <style> table { border-collapse: separate; width: 100%; } td, th { border: 1.5px solid black; padding: 5px; } td:nth-child(1) input, td:nth-child(2) input, td:nth-child(3) input, td:nth-child(4) input, td:nth-child(5) input, td:nth-child(6) input, td:nth-child(7) input, td:nth-child(8) input { width: 10%; } </style> </head> <body> <table> <tr> <td contenteditable="true"><input type="text" oninput="filterTable(0)" placeholder="工艺膜层"></td> <td contenteditable="true"><input type="text" oninput="filterTable(1)" placeholder="AOI Step"></td> <td contenteditable="true"><input type="text" oninput="filterTable(2)" placeholder="不良类型"></td> <td contenteditable="true"><input type="text" oninput="filterTable(3)" placeholder="Layer(Code)"></td> <td contenteditable="true"><input type="text" oninput="filterTable(4)" placeholder="Type"></td> <td contenteditable="true"><input type="text" oninput="filterTable(5)" placeholder="Dpet"></td> <td contenteditable="true"><input type="text" oninput="filterTable(6)" placeholder="Subcode"></td> <td contenteditable="true">Code描述</td> <td contenteditable="true">Image1</td> <td contenteditable="true">Image2</td> <td contenteditable="true">Image3</td> <td contenteditable="true">Image4</td> <td contenteditable="true">Image5</td> <td contenteditable="true">Image6</td> <td contenteditable="true">判定细则</td> </tr> </thead> <tbody> <tr> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;" > </td> <td> <input type="file" onchange="previewImage(this)"onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)"onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td contenteditable="true">Particle</td> </tr> </tbody> </table> <script> window.addEventListener('DOMContentLoaded', (event) => { const td8 = document.querySelector('td:nth-child(8)'); td8.style.width = '300px'; }); </script> </body> </html>以上代码中无法修改第8列列宽,哪里存在问题
时间: 2023-08-14 13:01:14 浏览: 50
根据你提供的代码,无法修改第8列的列宽的问题是因为在JavaScript代码中,你选择的是第8个`td`元素,而实际上第8列是第9个`td`元素。所以需要将代码中的`querySelector`中的索引改为9,如下所示:
```javascript
window.addEventListener('DOMContentLoaded', (event) => {
const td9 = document.querySelector('td:nth-child(9)');
td9.style.width = '300px';
});
```
这样就能够正确地修改第8列的列宽为300px了。
相关问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鉴本</title> <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script> <style> table { border-collapse: collapse; width: 100%;xlsx 库可以这么加么
非常抱歉给您带来困扰。在您的代码中,如果您想要在页面中引入 `xlsx` 库,可以将以下代码添加到 `<head>` 标签中:
```html
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
```
这将从 `https://unpkg.com` 上加载 `xlsx` 库,使您能够在页面中使用相关功能。
另外,您的代码片段中的 CSS 样式是用来设置表格的边框合并和宽度的。如果您希望将表格边框合并并设置宽度为100%,可以使用以下样式:
```css
table {
border-collapse: collapse;
width: 100%;
}
```
请确保将上述代码放在 `<style>` 标签中或者外部 CSS 文件中,并在页面中使用正确的 HTML 结构来创建表格。
希望这次能满足您的需求。如果您有任何其他问题,请随时提问。
<%@ Page Language="C#" %> <!DOCTYPE html> <html> <head> <title>Table Example</title> </head> <body> <form runat="server"> <table width="200"> <% for (int i = 1; i <= 100; i++) { %> <tr> <td><%= i %></td> </tr> <% } %> </table> </form> </body> </html>
这是一个 ASP.NET Web Forms 的页面代码,使用 C# 语言编写。该页面生成一个包含 100 行的简单 HTML 表格,每一行都包含一个单元格,显示该行的行号。
在 ASP.NET Web Forms 中,页面代码通常包含一个 `<form>` 标签和一个运行在服务器上的 ASP.NET Web Forms 控件。在这个例子中,我们只使用了一个简单的 HTML 表格,没有使用任何 ASP.NET Web Forms 控件。
在表格中,我们使用了一个 `for` 循环来生成 100 行。在每一行的单元格中,我们使用了 `<%= i %>` 的语法来输出该行的行号 `i`。这个语法可以在 ASP.NET Web Forms 中用来输出动态内容,类似于 PHP 中的 `echo` 或 Python 中的 `print`。