web-dev-qa-db-ja.com

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

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

htmlhtml5scrollbarhtml-table
27
Prasanna

はい、できます。

最も簡単な方法は、セル内に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に置き換えます。

デモ

35
Denys Séguret
<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/

お役に立てれば

12
Parag

それに応じてスクロールされるように、div要素の「高さ」または「幅」のいずれかを提供する必要があります。たとえば、垂直スクロール（Y軸）を適用する場合：-

<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
}
3
gopal sharma