使用css resize调整表格单元格的大小:两者; 不和桌子一起工作

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

似乎调整大小:不适用于表格.

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

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

但是您可以将表包装在div中并将resize:设置为div,但即使使用%width值也无法缩小表.

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

Answer 2

要覆盖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适用于除overflow属性以外的所有元素visible.在实践中,它以更有限的方式工作,并且在不同的浏览器中有所不同.