在表格单元格上调整CSS大小不允许宽度减小

Question

我有以下代码here：

table {
  border-collapse: collapse;
  border-spacing: 0px;
  resize: both;
}
td {
  border: 2px solid black;
  padding: 10px 20px 10px 20px;
  margin: 0px;
  resize: both;
  overflow: auto;
}
div {
  resize: both;
  overflow: auto;
  width: 120px;
  height: 120px;
  border: 1px solid black;
}

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

<br>

<div></div>

它无法在Chrome，Safari或IE中使用。

• 如果您重新调整左上角单元格的宽度，然后重新调整左中间单元格的宽度，则不会让您缩小宽度。
• 如果您尝试再次通过左上角的单元缩小尺寸，则无法正常工作 无论是。

我该如何解决？

Answer 1

也许错误是你的代码。您可能不允许调整大小表和tds。你可以调整你的td里面的div，这是正确的。在firefox和webkit浏览器中不允许使用表和单元格大小调整它是危险的。

你可以做这样的事情：

    <table>
        <tr>
            <td><div></div></td>
            <td><div></div></td>
            <td><div></div></td>
        </tr>
        <tr>
            <td><div></div></td>
            <td><div></div></td>
            <td><div></div></td>        
        </tr>
        <tr>
            <td><div></div></td>
            <td><div></div></td>
            <td><div></div></td>       
        </tr>   
    </table>
    <br>
    <div></div>

和css

    table, td { resize: none; }
    table td div { min-width: 50px; min-height: 50px; resize: both; }

Answer 2

使用CSS resize property调整元素大小时，CSS高度/宽度将内联应用于该表格单元格。

示例：

现在，让我们调整其下方的单元格，使宽度更小：

它不起作用，顶部单元格的宽度不会改变，列仍然是其最大单元格的宽度。

这种特殊行为不是错误，它是resize属性的限制。要获得所需的结果，您需要调整列中所有单元格的宽度（当调整大小时）。这需要javascript。

注意：我并不是说Chrome（测试44.0.2403.130米）没有使用表格单元格上的resize属性进行错误，它确实显示非常错误的行为。