javascript - 如何阻止 HTML 表格调整大小？

Question

我正在尝试创建一个井字游戏。

用户可以点击网格来放置十字。我很难弄清楚如何在表格自动调整大小的情况下放置十字 (X):

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

我试过 table-layout: fixed 和 white-space: nowrap 都无济于事。任何人都可以启发我，或者提供一个工作变体吗？

代码笔: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

我已经更新了你的代码。

代码笔: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>");
});