英文:
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 -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论