Почему этот код не помогает мне получить пустую доску с крестиками?

Question

вот кодекс, может кто-нибудь сказать, почему границы не отображаются?Я хочу, чтобы достичь этого https://codepen.io/javisp91/pen/PmzpLz без использования класса.

1004 * Я использовал п-о-типа и обрабатывают таблицу как матрицу.Этот код не отображает границы.Что может быть переопределением?

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

Попробуйте этот код.

table {margin: auto;border: solid // вы забыли эту строку в своем коде, поместите эту строку для отображения границы.}