Question

我正在尝试制作一个井字游戏。

用户可以单击网格以放置十字。我很难弄清楚如何在没有表格自动调整大小的情况下放置十字架（X）：

如在codepen演示中所见，只要单击“td”元素，表格就会展开以填充“X”。

我已尝试table-layout: fixed和white-space: nowrap无济于事。任何人都可以启发我，或提供一个可行的变体？

Codepen：https://codepen.io/anon/pen/ppXgKZ

HTML

<table>
<tr>
    <td style="white-space: nowrap;"></td>
    <td></td>
    <td></td>
</tr>

<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>

<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>

CSS

table {
    width: 20%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  td {
    width: 33.333%;
    border: 6px solid black;
  }
  td::after {
    content: '';
    display: block;
    margin-top: 100%;
  }

JS （jquery）

$("td").on("click", function() {
  $(this).text("X");
});

Answer 1

well i have updated your code.

codpen：https://codepen.io/anon/pen/BJgjbm

<强> HTML

<table>
    <tr>
        <td style="white-space: nowrap;"></td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>

    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<强> CSS

table {
    width: 20%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  td {
    width: 33.333%;
    border: 6px solid black;
  }
  td::after {
    content: '';
    display: block;
    margin-top: 100%;
  }

.nopos{
  position:absolute;
}

<强> JS

$("td").on("click", function() {
  $(this)
    .html("<div class='nopos'>XXX</div>");
});

Answer 2

这可以是更好更简单的方法：

＆＃13;

$("td").on("click", function() {
  $(this).text("X");
});

＆＃13;

table {
    table-layout: fixed;
    border-collapse: collapse;
 
  }
tr{
  overflow:hidden;
}
  td {
    width: 100px;
    height:100px;
    text-align:center;
    max-width: 33.333%;
    border: 6px solid black;
  }

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
</head>
<body>
  <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>

</body>
</html>

＆＃13;

Answer 3

我相信答案是在CSS td :: after之后。当您将X放入框中时，它会创建一个新行，以便在输入时增加框大小。要解决这个问题，你可以在CSS规则之后添加“float：left”到td ::。

如何阻止HTML表调整大小？

3 个答案: