使用 css resize:both 调整表格单元格的大小；不使用表格答案

【问题标题】：Resize a table cell using css resize:both; not working with table使用 css resize:both 调整表格单元格的大小；不使用表格
【发布时间】：2018-06-15 08:14:49
【问题描述】：

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

任何人都可以帮忙

【问题讨论】：

叹息为什么像可调整大小的列这样的标准功能在桌面应用程序中已经超级简单了 15 年以上没有添加到 css3/html5 中

标签： html css

【解决方案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 属性的元素。在实践中，它的工作方式更加有限，并且在不同的浏览器中也有所不同。

【讨论】：

我喜欢你的第一个答案：th, td { resize: both;溢出：自动； } 用于 chrome 和 safari。谢谢

【解决方案2】：

resize: 似乎不适用于表格。

table {
    border:2px solid;
    padding:10px 40px; 
    width:300px;
    resize:both;
    overflow:auto;
}

http://jsfiddle.net/Kyle_/q4qwp/

但是您可以将表格包装在 div 中并将 resize: 设置为 div，但即使使用 % 宽度值也无法缩小表格。

http://jsfiddle.net/q4qwp/3/

【讨论】：

如何调整单元格的大小？你能帮忙吗
您无法使用此方法调整表格大小。您将不得不求助于 javascript。
链接不存在了
@titusfx 链接已恢复。
有没有办法移动调整器来占据整个边框？ w3schools.com/cssref/tryit.asp?filename=trycss3_resize 。这似乎是一样的。

【解决方案3】：

要调整表格和表格列的大小，您必须使用 Javascript。有几个 jQuery 插件可以这样做，例如 colResizable，它允许您手动拖动列锚。

这是一段小sn-p代码：

$("#tabe").colResizable({});

您可以在以下位置找到更多示例：http://www.bacubacu.com/colresizable/ 或者你可以试试这个小提琴：http://jsfiddle.net/euka4rm3/

【讨论】：

【解决方案4】：

您可以使用外部 div 的样式来更改表格的位置。例如

<div style="resize:both">
    <table id="sample table"></table>
</div>

【讨论】：