英文:
How to create different background for my Table row nth-child?
问题
我已经使用外部的Grid.js库创建了一个表格。我在表格的样式方面遇到了一些问题。我想要改变除了一行之外的所有行的背景颜色。我使用了以下CSS代码：tr.gridjs-tr:nth-child(even) {background: #47bb60;}，但它不起作用。你能提供一些建议，CSS中缺少什么吗？
th {box-sizing: border-box;background: #1f61cf;color: #fff;}tr.gridjs-tr:nth-child(even) {background: #47bb60;}
这段CSS代码应该能够实现你想要的效果。希望对你有所帮助。
英文:
I have created a table by using the external grid js library. I am facing some issues in styling the table. I want to change the background color of all the rows by leaving one row. I am using the code tr.gridjs-tr:nth-child(even) {background: #47bb60;} but It's not working. Can you suggest to me, What is missing in the CSS?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
new gridjs.Grid({columns: ["Name", "Email", "Phone Number"],data: [["John", "john@example.com", "(353) 01 222 3333"],["Mark", "mark@gmail.com", "(01) 22 888 4444"],["Eoin", "eoin@gmail.com", "0097 22 654 00033"],["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"]],sort: true,Default: true,style: {table: {border: '3px solid #ccc'},th: {'background-color': 'rgba(0, 0, 0, 0.1)','color': '#fff','border-bottom': '3px solid #ccc','text-align': 'center'},td: {'text-align': 'center'},}}).render(document.getElementById("wrapper"));
<!-- language: lang-css -->
th {box-sizing: border-box;background: #1f61cf;color: #fff;}tr.gridjs-tr:nth-child(even) {background: #47bb60;}
<!-- language: lang-html -->
<!DOCTYPE html><html lang="en-US"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="style.css" rel="stylesheet"><link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" /></head><body><div id="wrapper"></div><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script><script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script><script type="text/javascript" src="js.js"></script></body></html>
<!-- end snippet -->
答案1
得分: 2
如果你想要交替改变行的背景颜色，可以使用 nth-child(even/odd) 选择 tr 元素，然后将背景颜色应用到 td 元素。
th {box-sizing: border-box;background: #1f61cf;color: #fff;}.gridjs-tr:nth-child(even) td {background: #47bb60;}
这段CSS代码将奇数行的背景颜色设置为 #47bb60，偶数行的背景颜色保持不变。
英文:
If you want to change the row color alternatively, select the tr using nth-child(even/odd) and then apply the background color to td
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
new gridjs.Grid({columns: ["Name", "Email", "Phone Number"],data: [["John", "john@example.com", "(353) 01 222 3333"],["Mark", "mark@gmail.com", "(01) 22 888 4444"],["Eoin", "eoin@gmail.com", "0097 22 654 00033"],["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"],["Afshin", "afshin@mail.com", "(353) 22 87 8356"]],sort: true,Default: true,style: {table: {border: '3px solid #ccc'},th: {'background-color': 'rgba(0, 0, 0, 0.1)','color': '#fff','border-bottom': '3px solid #ccc','text-align': 'center'},td: {'text-align': 'center'},}}).render(document.getElementById("wrapper"));
<!-- language: lang-css -->
th {box-sizing: border-box;background: #1f61cf;color: #fff;}.gridjs-tr:nth-child(even) td {background: #47bb60;}
<!-- language: lang-html -->
<!DOCTYPE html><html lang="en-US"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="style.css" rel="stylesheet"><link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" /></head><body><div id="wrapper"></div><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script><script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script><script type="text/javascript" src="js.js"></script></body></html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论