我正在尝试向用户呈现此表格，并且我想将背景设置为此渐变颜色。背景实际上以前是一张图像，当情况仍然如此时它就会显示出来，但自从我删除它并用背景颜色替换它后，就没有显示任何背景属性。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
font-family: 'Poppins', sans-serif;
background-color: radial-gradient(circle at 10% 20%, rgb(147, 230, 241) 0%, rgb(145, 192, 241) 45.5%);
opacity: 1;
margin: 20px;
padding: 0;
height: 100vh; /* Sets the body height to 100% of the viewport height */
}
.header {
width: 100%;
olor: #333;
text-align: center;
margin-top: 20px;
}
nav {
padding: 10px;
padding-left: 10px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
background-color: white;
position: fixed;
margin-bottom: 20px;
top: 0;
left: 0;
z-index: 1000;
}
.logo h1 span {
color: rgb(0, 0, 0);
font-size: 13px;
padding-left: 5px;
}
.logo h1 {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: 500;
}
.table-container {
width: 100%;
margin: 0 auto;
overflow-x: auto;
background-color: radial-gradient(circle at 10% 20%, rgb(147, 230, 241) 0%, rgb(145, 192, 241) 45.5%);
border-radius: 8px;
padding: 15px;
}
table {
border: 3px solid black;
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
overflow: auto;
th {
background-color: #006400; /* Dark green background color */
color: white; /* White font color */
height: 60px;
}
/* Set fixed width for each column in the header row */
th:nth-child(1),
td:nth-child(1) {
width: 20%;
}
th:nth-child(2),
td:nth-child(2) {
width: 20%;
}
th:nth-child(3),
td:nth-child(3) {
width: 20%;
}
th:nth-child(4),
td:nth-child(4) {
width: 20%;
}
th:nth-child(5),
td:nth-child(5) {
width: 20%;
}
th:nth-child(6),
td:nth-child(6) {
width: 20%;
}
th:nth-child(7),
td:nth-child(7) {
width: 20%;
}
th:nth-child(8),
td:nth-child(8) {
width: 20%;
}
th:nth-child(9),
td:nth-child(9) {
width: 20%;
}
th:nth-child(10),
td:nth-child(10) {
width: 20%;
}
th:nth-child(11),
td:nth-child(11) {
width: 20%;
}
/* Responsive Background */
@media (max-width: 768px) {
body {
background-color: radial-gradient(circle at 10% 20%, rgb(147, 230, 241) 0%, rgb(145, 192, 241) 45.5%);
}
.table-container {
padding: 10px;
overflow-x: scroll;
}
}
</style>
</head>
<body>
<nav>
<div class="logo">
<h1>iConsult | <span>Appointment Scheduling System</span></h1>
</div>
</nav>
<center>
<div class="header">
<h2>Academic Advising Queue Dashboard</h2>
</div>
<br>
<div class="table-container">
<table>
<? var tableData = getSheetData(); ?>
<? for(var i = 0; i < tableData.length; i++) { ?>
<? if(i == 0) { ?>
<tr>
<? for(var j = 0; j < tableData[i].length; j++) { ?>
<th><?= tableData[i][j] ?></th>
<? } ?>
</tr>
<? } else { ?>
<tr>
<? for(var j = 0; j < tableData[i].length; j++) { ?>
<td><?= tableData[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
<? } ?>
</table>
</div>
</center>
</body>
</html>
你可以尝试用background替换background-color，发现“olor”有错字。