为什么这段代码无法帮助我实现空白的Tic-tac-toe板？

Question

这是codepen，任何人都可以说为什么边框不显示？我想在不使用课程的情况下实现这个https://codepen.io/javisp91/pen/PmzpLz。

我使用了nth-of-type并像处理矩阵一样处理了表格。此代码不显示边框。什么可能压倒一切？

tr td {
    width:100px;
    height: 100px;
}

tr: nth-of-type(1) td: nth-of-type(1) {
    border-right: 5px solid black;
    border-bottom: 5px solid black;
}

tr: nth-of-type(1) td: nth-of-type(2) {
    border-bottom: 5px solid black;
    border-right: 5px solid black;
    border-left: 5px solid black;
}

tr: nth-of-type(1) td: nth-of-type(3) {
    border-left: 5px solid black;
    border-bottom: 5px solid black;
}

tr: nth-of-type(2) td: nth-of-type(1) {
    border-right: 5px solid black;
    border-bottom: 5px solid black;
    border-top: 5px solid black;
}

tr: nth-of-type(2) td: nth-of-type(2) {
    border-bottom: 5px solid black;
    border-right: 5px solid black;
    border-left: 5px solid black;
    border-top: 5px solid black;
}

tr: nth-of-type(2) td: nth-of-type(3) {
    border-left: 5px solid black;
    border-bottom: 5px solid black;
    border-top: 5px solid black;
}

tr: nth-of-type(3) td: nth-of-type(1) {
    border-right: 5px solid black;
    border-top: 5px solid black;
}

tr: nth-of-type(3) td: nth-of-type(2) {
    border-top: 5px solid black;
    border-right: 5px solid black;
    border-left: 5px solid black;
}

tr: nth-of-type(3) td: nth-of-type(3) {
    border-left: 5px solid black;
    border-top: 5px solid black;
}

body {
    text-align: center;
}

table {
    margin: auto;
}

Answer 1

你没有正确定义它们。请参阅以下fork或代码段：

tr td{
	width:100px;
	height: 100px;
}
tr td{
	border-right: 5px solid black;
	border-bottom: 5px solid black;
}
tr td:last-child{
  border-right:0;
}

tr:last-child td{
  border-bottom:0;
}
body{
	text-align: center;
}
table{
	margin: auto;
}

	<h1>Tic Tac Toe</h1>
	<table>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
		<tr>
			<td> </td>
			<td> </td>
			<td> </td>
		</tr>
	</table>

逻辑：将所有tr td设置为除最后一个之外的右边界和底边界。

tr td{
    border-right: 5px solid black;
    border-bottom: 5px solid black;
}
tr td:last-child{
  border-right:0;
}

tr:last-child td{
  border-bottom:0;
}

Answer 2

试试这个代码。

表{margin：auto; border：solid //你忘了代码中的这一行把这一行放到显示边框。 }