html - テーブルセルのスクロールバー

Question

'td'タグにスクロールバーを追加する方法はありますか？'td'タグ内に動的コンテンツがあります。'td'を固定サイズにし、コンテンツが' td'サイズより大きくなる場合は、その特定のセルにのみスクロールバーを表示する必要があります。これを達成する方法はありますか？

Answer 1

はい、できます。

最も簡単な方法は、セル内に div を配置し、そのoverflowスタイル プロパティを設定することです。

CSS :

div.scrollable {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

HTML :

<td><div class=scrollable>
    Some content with a scrollbar if it's too big for the cell
</div></td>

コンテンツがトリミングされていない場合でも、スクロールバーを常に表示したい場合は、CSS でautoに置き換えます。scroll

デモンストレーション

Answer 2

<table  width ="400" >
    <tr>
        <td >
            <div style="width:100%; max-height:300px; overflow:auto">Your content here 
             </div>
        </td>
    </tr>
</table>

http://jsfiddle.net/7T2S4/1/

お役に立てれば

Answer 3

それに応じてスクロールされるように、div要素の「高さ」または「幅」のいずれかを指定する必要があります。たとえば、 Scroll Vertically(Y-axis) を適用したい場合:-

<td><div class="scrollable">
    Some content with a scrollbar if it's not fit in your customized container
</div></td>

div.scrollable
{
width:100%;
height: 100px;
margin: 0;
padding: 0;
overflow-y: scroll
}