如何阻止 HTML 表格调整大小？答案

【问题标题】：How to stop HTML table from resizing?如何阻止 HTML 表格调整大小？
【发布时间】：2020-09-27 07:26:33
【问题描述】：

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

用户可以点击一个网格来放置一个十字。我很难弄清楚如何在没有表格自动调整大小的情况下放置十字 (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");
});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我已经更新了你的代码。

Codepen：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;
}

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

【讨论】：

【解决方案2】：

这可能是一种更好更简单的方法：

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

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;
  }

<!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>

【讨论】：

我刚刚更改了 CSS

【解决方案3】：

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

【讨论】：