10

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>

どんな体も助けることができます

4

4 に答える 4

7

ChromeとSafariをカバーするには、

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

テーブル全体に初期幅を設定しないでください。ただし、セルまたは列の幅は設定できます。

Firefoxもカバーするために、各セルのコンテンツをクラスでラップしdiv、対応するクラスセレクターを上記のルールに追加する必要があるのではないかと思います。そして、これは各セルのChromeとSafariに2つのサイズ変更ハンドルを導入します...したがって、おそらく使用する必要があります

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

すべてのセルとCSSルール

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

（td要素のサイズを変更せずに）。

このように、すべてのセルのサイズを変更できるため、テーブル全体のサイズを間接的に変更できます（幅と高さを設定しない限り）。

原則として、以外のプロパティresizeを持つすべての要素に適用されます。実際には、動作ははるかに制限されており、ブラウザによって異なります。overflowvisible

于 2012-11-16T11:41:07.137 に答える
6

resize：はテーブルには適用できないようです。

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/

于 2012-11-16T07:45:56.110 に答える
2

テーブルとテーブル列のサイズを変更するには、Javascriptを使用する必要があります。colResizableたとえば、列アンカーを手動でドラッグできるjQueryプラグインがいくつかあります。

コードの小さなスニペットは次のとおりです。

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

http://www.bacubacu.com/colresizable/で他の例を見つけることができます。 または、このフィドルを試すことができます： http : //jsfiddle.net/euka4rm3/

于 2014-12-23T11:13:30.237 に答える
1

外側のdivのスタイルを使用して、テーブルの位置を変更できます。例えば

<div style="resize:both">
    <table id="sample table"></table>
</div>
于 2012-11-16T07:35:08.617 に答える