Question

尝试使用简单的Tic Toc Toe游戏应用程序进行前端设计。不幸的是，CSS不能使线条非常准确，并且在每个块之间不会产生间隙。请提出任何美学建议，使设计美观连贯？

我试图将Mozilla MDN社区用于MODEL-BOX概念，但没有得到我的解决方案。

h3 {
  text-align: center;
}

td {
  width: 70px;
  height: 70px;
}

#td11 {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

#td13 {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

#td22 {
  border: 1px solid black;
}

#td31 {
  border-top: 1px solid black;
  border-right: 1px solid black;
}

#td33 {
  border-top: 1px solid black;
  border-left: 1px solid black;
}

<body>
  <h3>Tic Tac Toe</h3>
  <table align="center">
    <thead></thead>
    <tr>
      <td id="td11"></td>
      <td id="td12"></td>
      <td id="td13"></td>
    </tr>
    <tr>
      <td id="td21"></td>
      <td id="td22"></td>
      <td id="td23"></td>
    </tr>
    <tr>
      <td id="td31"></td>
      <td id="td32"></td>
      <td id="td33"></td>
    </tr>
    <tr></tr>
  </table>
</body>

Answer 1

我认为您需要CSS的border-collapse属性。

编辑，我应该补充一点，该解决方案仅解决<table>单元格边界中的间隙的特定问题。

table {
  border-collapse: collapse;
}

h3 {
  text-align: center;
}

table {
  border-collapse: collapse;
}

td {
  width: 70px;
  height: 70px;
}

#td11 {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

#td13 {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

#td22 {
  border: 1px solid black;
}

#td31 {
  border-top: 1px solid black;
  border-right: 1px solid black;
}

#td33 {
  border-top: 1px solid black;
  border-left: 1px solid black;
}

<body>
  <h3>Tic Tac Toe</h3>
  <table align="center">
    <thead></thead>
    <tr>
      <td id="td11"></td>
      <td id="td12"></td>
      <td id="td13"></td>
    </tr>
    <tr>
      <td id="td21"></td>
      <td id="td22"></td>
      <td id="td23"></td>
    </tr>
    <tr>
      <td id="td31"></td>
      <td id="td32"></td>
      <td id="td33"></td>
    </tr>
    <tr></tr>
  </table>
</body>

Answer 2

看看这个：

TicTacToe

HTML：

<h1>Tic Tac Toe</h1>
<table>
    <tr>
        <td></td>
        <td class="vert"></td>
        <td></td>
    </tr>
    <tr>
        <td class="hori"></td>
        <td class="vert hori"></td>
        <td class="hori"></td>
    </tr>
    <tr>
        <td></td>
        <td class="vert"></td>
        <td></td>
    </tr>
</table>

CSS：

h1 {
  text-align: center;
}
td {
  width: 100px;
  height: 100px;
}
table {
  margin: 5px auto;
}
.vert {
  border-left: 2px solid black;
  border-right: 2px solid black;
}
.hori {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

Answer 3

通过将这些属性添加到表本身，可以得到更好的设计。

<table align="center" cellpadding="1" cellspacing="1" border="1"></table>

Answer 4

您应在CSS中添加以下代码：

   *{
        padding:0;
        margin:0;
    }

也许这可以解决您的问题。

用html和css制作精细的tictactoe行

4 个答案: