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

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 中定义 (border: none; 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;
}

希望对你有帮助。