如何删除边框并更改表格左上方单元格的背景颜色？

Question

我在更改表格的左上角单元格时遇到麻烦。 我有这张桌子：

<table>
	<caption>zľavové hodiny</caption>
	<tr>
		<th>zač./deň</th><th>pondelok</th><th>utorok</th><th>streda</th><th>štvrtok</th><th>piatok</th>
	</tr>
	<tr>
		<th>10:00</th>
		<td></td>
		<td></td>
		<td colspan="3">práčky, sušičky (-20%)</td>
	</tr>
	<tr>
		<th>12:00</th>
		<td colspan="2">mikrovlnné rúry (-25%)</td>
		<td></td>
		<td>vysávače (-30%)</td>
		<td></td>
	</tr>
</table>

，我必须更改表格左上角单元格的背景颜色。它应该具有背景颜色#CCCCCC，并且右侧不应有5px的边框（另一侧仅1px）。其他所有内容都应保持不变。有什么想法怎么办？

这是我的CSS代码：

table { 
border: 5px double #999;
background-color: white;
border-spacing: 5px 1em;
empty-cells: hide;
margin-left: auto; 
margin-right: auto;
}

table th, table td { 
border: 1px solid black;
padding: 0.5em;
border-collapse: collapse; 
 }
 
table tr:nth-child(1) { 
background-color: gold;
}

table th:nth-child(2) { 
border-bottom-width: 5px;
}

table th:nth-child(3) { 
border-bottom-width: 5px;
}


table th:nth-child(4) { 
border-bottom-width: 5px;
}

table th:nth-child(5) { 
border-bottom-width: 5px;
}

table th:nth-child(6) { 
border-bottom-width: 5px;
}

table tr:nth-child(odd) {
background-color: orangered;
}
 
table tr:nth-child(1) { 
background-color: gold;
}

tr th:nth-child(1) { 
background-color: plum;
border-right-width: 5px;
}

Answer 1

您可以使用tr:first-child th:first-child选择器来获取/到达左上角的单元格。

table { 
border: 5px double #999;
background-color: white;
border-spacing: 5px 1em;
empty-cells: hide;
margin-left: auto; 
margin-right: auto;
}

table th, table td { 
border: 1px solid black;
padding: 0.5em;
border-collapse: collapse; 
 }
 
table tr:nth-child(1) { 
background-color: gold;
}

table th:nth-child(2) { 
border-bottom-width: 5px;
}

table th:nth-child(3) { 
border-bottom-width: 5px;
}


table th:nth-child(4) { 
border-bottom-width: 5px;
}

table th:nth-child(5) { 
border-bottom-width: 5px;
}

table th:nth-child(6) { 
border-bottom-width: 5px;
}

table tr:nth-child(odd) {
background-color: orangered;
}
 
table tr:nth-child(1) { 
background-color: gold;
}

tr:first-child th:first-child { 
background-color: #CCCCCC;
/* add what you want */
}

<table>
	<caption>zľavové hodiny</caption>
	<tr>
		<th>zač./deň</th><th>pondelok</th><th>utorok</th><th>streda</th><th>štvrtok</th><th>piatok</th>
	</tr>
	<tr>
		<th>10:00</th>
		<td></td>
		<td></td>
		<td colspan="3">práčky, sušičky (-20%)</td>
	</tr>
	<tr>
		<th>12:00</th>
		<td colspan="2">mikrovlnné rúry (-25%)</td>
		<td></td>
		<td>vysávače (-30%)</td>
		<td></td>
	</tr>
</table>

Answer 2

只需在th上添加一个类（空白）并在CSS中定义（边框：无； background-color：#fff！important;）

table { 
border: 5px double #999;
background-color: white;
border-spacing: 5px 1em;
empty-cells: hide;
margin-left: auto; 
margin-right: auto;
}

table th, table td { 
border: 1px solid black;
padding: 0.5em;
border-collapse: collapse; 
 }
 
table tr:nth-child(1) { 
background-color: gold;
}

table th:nth-child(2) { 
border-bottom-width: 5px;
}

table th:nth-child(3) { 
border-bottom-width: 5px;
}


table th:nth-child(4) { 
border-bottom-width: 5px;
}

table th:nth-child(5) { 
border-bottom-width: 5px;
}

table th:nth-child(6) { 
border-bottom-width: 5px;
}

table tr:nth-child(odd) {
background-color: orangered;
}
 
table tr:nth-child(1) { 
background-color: gold;
}

tr th:nth-child(1) { 
background-color: plum;
border-right-width: 5px;
}

.blank
{
border:none;
background-color:#fff !important;
}

<table>
	<caption>zľavové hodiny</caption>
	<tr>
		<th class="blank">zač./deň</th><th>pondelok</th><th>utorok</th><th>streda</th><th>štvrtok</th><th>piatok</th>
	</tr>
	<tr>
		<th>10:00</th>
		<td></td>
		<td></td>
		<td colspan="3">práčky, sušičky (-20%)</td>
	</tr>
	<tr>
		<th>12:00</th>
		<td colspan="2">mikrovlnné rúry (-25%)</td>
		<td></td>
		<td>vysávače (-30%)</td>
		<td></td>
	</tr>
</table>

Answer 3

也许您可以在CSS中执行以下操作：

table  tr:nth-child(1) th:nth-child(1){
background:#CCC;
border:1px 5px 1px 1px;
border-style: solid;
border-color: #the color;
}

希望有帮助。