Html 使用 css resize:both 调整表格单元格的大小；不使用表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13412203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resize a table cell using css resize:both; not working with table
提问by Akhilraj N S
Resize a table cell using css {resize:both;} not working with table
使用 css {resize:both;} 调整表格单元格的大小，不适用于表格
I need to resize table and its cell, resize able using css , css {resize:both;} is working in div but not in table tags
我需要调整表格及其单元格的大小，可以使用 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>
can any body help
任何身体都可以帮助
采纳答案by Kyle
It appears that resize: is not applicable to tables.
看来 resize: 不适用于表格。
table {
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}?
http://jsfiddle.net/Kyle_/q4qwp/
http://jsfiddle.net/Kyle_/q4qwp/
But you can wrap the table in a div and set the resize: to the div instead, but you cannot shrink the table even with % width values.
但是您可以将表格包装在 div 中并将 resize: 设置为 div，但即使使用 % 宽度值也无法缩小表格。
回答by Jukka K. Korpela
To cover Chrome and Safari, use
要覆盖 Chrome 和 Safari，请使用
th, td { resize: both; overflow: auto; }
Do not set initial width on the table as a whole. You can set the widths of cells or columns, though.
不要在整个桌子上设置初始宽度。不过，您可以设置单元格或列的宽度。
To cover Firefox as well, I'm afraid you would need to wrap the content of each cell on a divwith a class and add the corresponding class selector to the rule above. And this would introduce two resize handles on Chrome and Safari in each cell... so maybe you should use
为了涵盖 Firefox，恐怕您需要将每个单元格的内容div用一个类包裹起来，并将相应的类选择器添加到上面的规则中。这将在每个单元格中的 Chrome 和 Safari 上引入两个调整大小的句柄......所以也许你应该使用
<td><div class=cell>...</div></td>
for every cell and the CSS rule
对于每个单元格和 CSS 规则
.cell { resize: both; overflow: auto; width: 100%; height: 100%; }
(without making tdelements resizable).
（不使td元素可调整大小）。
This way, all cells are resizable, so the table as a whole is indirectly resizable (as long as you do not set its width and height).
这样，所有单元格都可以调整大小，因此整个表格可以间接调整大小（只要您不设置其宽度和高度）。
In principle, resizeapplies to all elements with overflowproperty other than visible. In practice, it works in a much more limited way, and differently in different browsers.
原则上，resize适用于所有overflow属性不为 的元素visible。在实践中，它以更有限的方式工作，并且在不同的浏览器中有所不同。
回答by Alvaro Prieto
To resize tables and table columns you have to use Javascript. There are several jQuery plugins out there doing so, for example colResizable, which allows you to drag column anchors manually.
要调整表格和表格列的大小，您必须使用 Javascript。有几个 jQuery 插件可以这样做，例如colResizable，它允许您手动拖动列锚点。
Here is a small snippet of code:
这是一小段代码：
$("#tabe").colResizable({});
you can find more examples on: http://www.bacubacu.com/colresizable/or you can try this fiddle: http://jsfiddle.net/euka4rm3/
您可以在以下位置找到更多示例：http: //www.bacubacu.com/colresizable/或者您可以试试这个小提琴：http: //jsfiddle.net/euka4rm3/
回答by Xavier
you can use styles of the outer div to change position of the table. For example
您可以使用外部 div 的样式来更改表格的位置。例如
<div style="resize:both">
<table id="sample table"></table>
</div>
