html - 使用 css resize :both; not working with table 调整表格单元格的大小

Question

使用 css {resize:both;} 调整表格单元格的大小不适用于表格

我需要调整表格及其单元格的大小，可以使用 css 调整大小， css {resize:both;} 在 div 中有效，但在表格标签中无效

<table border="1" style="resize:both;">
<tr>
<td>hi table</td>
<td>hi div</td>
</tr>
<tr>
<td>hi table</td>
<td>hi div</td>
</tr>
<tr>
<td>hi table</td>
<td>hi div</td>
</tr>
</table>

谁能帮忙

Answer 1

要覆盖 Chrome 和 Safari，请使用

th, td { resize: both; overflow: auto; }

不要对整个表格设置初始宽度。不过，您可以设置单元格或列的宽度。

要同时覆盖 Firefox，恐怕您需要用一个类将每个单元格的内容包装在一个 div 上，并将相应的类选择器添加到上面的规则中。这会在每个单元格的 Chrome 和 Safari 上引入两个调整大小的句柄......所以也许你应该使用

<td><div class=cell>...</div></td>

对于每个单元格和 CSS 规则

.cell { resize: both; overflow: auto; width: 100%; height: 100%; }

(不使 td 元素可调整大小)。

这样，所有单元格都可以调整大小，因此整个表格可以间接调整大小(只要您不设置它的宽度和高度)。

原则上，resize 适用于除visible 之外的所有具有overflow 属性的元素。实际上，它的工作方式非常有限，并且在不同的浏览器中也有所不同。