1

div 内にラップされた 2 つのテーブルの 2 つの個別のスクロール バーを表示しようとしています。

私のコードは次のとおりです

<html>
<body>



<div style="width:300px;background:#00CC33;height:100px;">
<div style="width:150px;float:left;">
<table width="100px" border="1">
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr>
<tr>
  <td>100</td>
</tr><tr>
  <td>100</td>
</tr><tr>
  <td>100</td>
</tr>

</table>
</div>
<div style="width:100px;float:left;">
<table width="100px" border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>

</table>

</div>
</body>
</html>

私が試したこと：overflow:scroll;を使用しようとしました。しかし、私がそうしているとき、両方のテーブルが1つのスクロールバーにラップされています。

上記のテーブルは動的に生成されます。デモ: http://jsfiddle.net/HLyDq/

4

3 に答える 3

1

Add the following Styles to the two table-parent divs:

<div style="...;overflow-y:auto;max-height:100px;">

JsFiddle: http://jsfiddle.net/gQyYe/

于 2013-02-18T09:19:06.340 に答える