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

Answer 3

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

以下是一小段代码：

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

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

Answer 4

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

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

Answer 5

您可以指定列宽，如下所示

<table class="table_display">
   <col width="20%">
   <col width="20%">
   <col width="30%">
   <col width="15%">
   <col width="15%">

   <thead>...</thead>
   </tbody>...</tbody>
</table>

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

5 个答案: