table tr:nth-child

(略过提问) "table tr:nth-child" 是一种 CSS 选择器语法。它用于选择表格中某个特定位置的行。":nth-child(n)" 表示选择一个父元素下的第 n 个子元素。在这个选择器中，"table tr:nth-child(n)" 将选择表格中的第 n 行。你可以在 CSS 文件或样式标签中使用这个选择器来应用样式或进行其他操作。请问还有其他问题吗？

好的，我将完整的代码粘贴给你 <div class="table" style="overflow-y: auto; height:15em; width:100%"> <table border="0" width="100%" height="16em" cellpadding="4.8" align="center"> <tr> <th>行政区划</th> <th>预警项目数</th> <th>已处置数</th> <th>未处置数</th> </tr> <tr> <td>杭州市</td> <td>216</td> <td>28</td> <td>2</td> </tr> <tr> <td>宁波市</td> <td>216</td> <td>28</td> <td>2</td> </tr> <tr> <td>湖州市</td> <td>216</td> <td>28</td> <td>2</td> </tr> <tr> <td>衢州市</td> <td>216</td> <td>28</td> <td>2</td> </tr> </table> </div> <style> table{ border-collapse:collapse; } table th{ color: #fff; font-size: 16px; height:20px; line-height: 20px; text-align: center; } table tr{ /* border: 1px solid red; */ color: rgb(220, 235, 251); height:40px; line-height: 40px; text-align: center; } table tr:nth-child(2n+3) td{ background: rgba(1, 154, 254, 0.1); //不同行换色 border: 1px solid red; } table td{ text-align: center; } </style>

我注意到您在代码中设置了表格样式和边框样式。我发现一个问题是，您在设置表格样式时使用了 `border-collapse: collapse;`，这会导致表格的边框合并在一起，使得 `table tr:nth-child(2n+3) td` 中的边框样式无法正常显示。解决这个问题的方法是，将 `border-collapse` 属性设置为 `separate`，以便单独显示每个单元格的边框。请尝试将以下代码添加到您的样式中： ```css table { border-collapse: separate; } ``` 在添加了此代码后，您应该能够在 `table tr:nth-child(2n+3) td` 中正确显示边框样式了。如果还有其他问题，请随时告诉我。

<!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>为什么前7列列宽能修改后面的列宽无法修改了

根据您提供的HTML代码，我注意到您在每个单元格中使用了`contenteditable="true"`属性，这可能会导致列宽无法修改。`contenteditable="true"`属性使单元格内容可编辑，这可能会干扰到CSS样式中设置的列宽。要解决这个问题，您可以将`contenteditable="true"`属性从那些您想要设置列宽的单元格中移除。修改后的代码如下所示： ```html <!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><input type="text" oninput="filterTable(0)" placeholder="工艺膜层"></td> <td><input type="text" oninput="filterTable(1)" placeholder="AOI Step"></td> <td><input type="text" oninput="filterTable(2)" placeholder="不良类型"></td> <td><input type="text" oninput="filterTable(3)" placeholder="Layer(Code)"></td> <td><input type="text" oninput="filterTable(4)" placeholder="Type"></td> <td><input type="text" oninput="filterTable(5)" placeholder="Dpet"></td> <td><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> </table> </body> </html> ``` 在上述代码中，我将`contenteditable="true"`属性从前七列的单元格中删除，以便您可以通过CSS样式设置它们的宽度。后面的列仍然保留了`contenteditable="true"`属性，以便您可以编辑其内容。请尝试使用修改后的代码，并检查是否可以成功设置前七列的宽度。如果仍然遇到问题，请提供更多详细信息，以便我可以更好地帮助您解决问题。

相关推荐

使用css属性:nth-child(n)匹配选择第n个子元素

jQuery :nth-child前有无空格的区别分析

great-reaper:胜利的网络爬虫

在html中所有的th都为如何使th:nth-child(2)起作用?

想用xpath提取这个路径怎么作“document.querySelector("#custom-table-track-full > table > tbody > tr:nth-child(2) > td:nth-child(2) > a")”

使用nth-child选择器实现它

css通过nth:child和伪类控制不同列的样式

css 修改table th tr边框样式

table隔行变色

class="table table-striped"

jQuery实现table隔行换色和鼠标经过变色的两种方法

最新推荐

基于网络的入侵检测系统源码+数据集+详细文档（高分毕业设计）.zip

本户型为2层独栋别墅D026-两层-13.14&12.84米-施工图.dwg

Java_带有可选web的开源命令行RatioMaster.zip

基于MATLAB实现的OFDM经典同步算法之一Park算法仿真，附带Park算法经典文献+代码文档+使用说明文档.rar

基于MATLAB实现的对机械振动信号用三维能量谱进行分析+使用说明文档.rar

zigbee-cluster-library-specification

管理建模和仿真的文件

【实战演练】MATLAB用遗传算法改进粒子群GA-PSO算法

openstack的20种接口有哪些

JSBSim Reference Manual