table {
  width: 100%;
}
td {
  width: 33.333%;
}
td:after {
  content: '';
  display: block;
  margin-top: 100%;
}

#ticktacktoe table, th, td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
}
td {
  border: 6px solid #222;
}
td:first-of-type {
  border-left-color: transparent;
  border-top-color: transparent;
}
td:nth-of-type(2) {
  border-top-color: transparent;
}
td:nth-of-type(3) {
  border-right-color: transparent;
  border-top-color: transparent;
}
tr:nth-of-type(3) td {
  border-bottom-color: transparent;
}</code>
</pre>
Can you see it? It's <code>border-collapse: collapse</code>. Normally table borders have a sort of gutter in them, so we need this property to get rid of that.
Apart from that, we're just setting the relevant border colors to transparent using the <a rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child">nth-child pseudo class</a>. This pseudo class only targets the nth child, so we can target the 2nd td in each column by adding 2 to the nth child pseudo class. We also use the first-of-type pseudo class which targets the first element in a group of elements.
And that's it, we got ourselves a responsive tic tac toe board.
Put all the CSS together and we're good to go :
<pre><code class="css">table {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 33.333%;
  border: 6px solid #222;
}
td::after {
  content: '';
  display: block;
  margin-top: 100%;
}
td {
  border: 6px solid #222;
}
td:first-of-type {
  border-left-color: transparent;
  border-top-color: transparent;
}
td:nth-of-type(2) {
  border-top-color: transparent;
}
td:nth-of-type(3) {
  border-right-color: transparent;
  border-top-color: transparent;
}
tr:nth-of-type(3) td {
  border-bottom-color: transparent;
}