Scrolled in the table

Question

there is a table:

<table style="width: 270px; height: 100%; display: table; overflow: scroll;" cellpadding="0" cellspacing="0" border="0"> <tbody><tr> <td valign="bottom" id="periubor"> <div style="width: 100%; height: auto; float: left; margin: 0 0 10px;"> <img width="40" height="40" src="image/user.png" style="float: left;"> <div style="width: 235px; height: 15px; line-height: 15px; float: right; margin: 0 0 5px; font-size: 14px; color: rgba(140,190,50,.9);"> kirpich634@gmail.com </div> <div style="width: 235px; height: auto; float: right; color: rgba(70,70,70,.9);"> esr </div> </div> <div style="width: 100%; height: auto; float: left; margin: 0 0 10px;"> <img width="40" height="40" src="image/user.png" style="float: left;"> <div style="width: 235px; height: 15px; line-height: 15px; float: right; margin: 0 0 5px; font-size: 14px; color: rgba(140,190,50,.9);"> kirpich634@gmail.com </div> <div style="width: 235px; height: auto; float: right; color: rgba(70,70,70,.9);"> esr </div> </div> <div style="width: 100%; height: auto; float: left; margin: 0 0 10px;"> <img width="40" height="40" src="image/user.png" style="float: left;"> <div style="width: 235px; height: 15px; line-height: 15px; float: right; margin: 0 0 5px; font-size: 14px; color: rgba(140,190,50,.9);"> kirpich634@gmail.com </div> <div style="width: 235px; height: auto; float: right; color: rgba(70,70,70,.9);"> всем привет </div> </div> <div style="width: 100%; height: auto; float: left; margin: 0 0 10px;"> <img width="40" height="40" src="image/user.png" style="float: left;"> <div style="width: 235px; height: 15px; line-height: 15px; float: right; margin: 0 0 5px; font-size: 14px; color: rgba(140,190,50,.9);"> kirpich634@gmail.com </div> <div style="width: 235px; height: auto; float: right; color: rgba(70,70,70,.9);"> тох </div> </div> <div style="width: 100%; height: auto; float: left; margin: 0 0 10px;"> <img width="40" height="40" src="image/user.png" style="float: left;"> <div style="width: 235px; height: 15px; line-height: 15px; float: right; margin: 0 0 5px; font-size: 14px; color: rgba(140,190,50,.9);"> kirpich634@gmail.com </div> <div style="width: 235px; height: auto; float: right; color: rgba(70,70,70,.9);"> dfgdfg </div> </div> <div style="width: 100%; height: auto; float: left; margin: 0 0 10px;"> <img width="40" height="40" src="image/user.png" style="float: left;"> <div style="width: 235px; height: 15px; line-height: 15px; float: right; margin: 0 0 5px; font-size: 14px; color: rgba(140,190,50,.9);"> kirpich634@gmail.com </div> <div style="width: 235px; height: auto; float: right; color: rgba(70,70,70,.9);"> вапвап </div> </div> <div style="width: 100%; height: auto; float: left; margin: 0 0 10px;"> <img width="40" height="40" src="image/user.png" style="float: left;"> <div style="width: 235px; height: 15px; line-height: 15px; float: right; margin: 0 0 5px; font-size: 14px; color: rgba(140,190,50,.9);"> kirpich634@gmail.com </div> <div style="width: 235px; height: auto; float: right; color: rgba(70,70,70,.9);"> ар </div> </div> <div style="width: 100%; height: auto; float: left; margin: 0 0 10px;"> <img width="40" height="40" src="image/user.png" style="float: left;"> <div style="width: 235px; height: 15px; line-height: 15px; float: right; margin: 0 0 5px; font-size: 14px; color: rgba(140,190,50,.9);"> kirpich634@gmail.com </div> <div style="width: 235px; height: auto; float: right; color: rgba(70,70,70,.9);"> рапр </div> </div> <div style="width: 100%; height: auto; float: left; margin: 0 0 10px;"> <img width="40" height="40" src="image/user.png" style="float: left;"> <div style="width: 235px; height: 15px; line-height: 15px; float: right; margin: 0 0 5px; font-size: 14px; color: rgba(140,190,50,.9);"> kirpich634@gmail.com </div> <div style="width: 235px; height: auto; float: right; color: rgba(70,70,70,.9);"> апрпавр </div> </div> <div style="width: 100%; height: auto; float: left; margin: 0 0 10px;"> <img width="40" height="40" src="image/user.png" style="float: left;"> <div style="width: 235px; height: 15px; line-height: 15px; float: right; margin: 0 0 5px; font-size: 14px; color: rgba(140,190,50,.9);"> kirpich634@gmail.com </div> <div style="width: 235px; height: auto; float: right; color: rgba(70,70,70,.9);"> впарвпар </div> </div> <div style="width: 100%; height: auto; float: left; margin: 0 0 10px;"> <img width="40" height="40" src="image/user.png" style="float: left;"> <div style="width: 235px; height: 15px; line-height: 15px; float: right; margin: 0 0 5px; font-size: 14px; color: rgba(140,190,50,.9);"> kirpich634@gmail.com </div> <div style="width: 235px; height: auto; float: right; color: rgba(70,70,70,.9);"> впар </div> </div> <div style="width: 100%; height: auto; float: left; margin: 0 0 10px;"> <img width="40" height="40" src="image/user.png" style="float: left;"> <div style="width: 235px; height: 15px; line-height: 15px; float: right; margin: 0 0 5px; font-size: 14px; color: rgba(140,190,50,.9);"> kirpich634@gmail.com </div> <div style="width: 235px; height: auto; float: right; color: rgba(70,70,70,.9);"> пар </div> </div> <div style="width: 100%; height: auto; float: left; margin: 0 0 10px;"> <img width="40" height="40" src="image/user.png" style="float: left;"> <div style="width: 235px; height: 15px; line-height: 15px; float: right; margin: 0 0 5px; font-size: 14px; color: rgba(140,190,50,.9);"> kirpich634@gmail.com </div> <div style="width: 235px; height: auto; float: right; color: rgba(70,70,70,.9);"> впавп </div> </div> <div style="width: 100%; height: auto; float: left; margin: 0 0 10px;"> <img width="40" height="40" src="image/user.png" style="float: left;"> <div style="width: 235px; height: 15px; line-height: 15px; float: right; margin: 0 0 5px; font-size: 14px; color: rgba(140,190,50,.9);"> kirpich634@gmail.com </div> <div style="width: 235px; height: auto; float: right; color: rgba(70,70,70,.9);"> чвапвыарвыара </div> </div> </td> </tr> </tbody></table>

it is necessary that the table is not stretched by the contents, but the scrolling bar is displayed even when the page is loaded

 <td> </td>

derived from the bottom and not the top /

I tried display: block; Tagda table does not stretch, but scrolling does not work. - Kirpich643

KaZats KaZats 3.262 eight 18 · Answer 1 · 2012-12-08T11:33:21

wrap in <div style='overflow:auto;height:высота в px или в %'></div>

derived from the bottom and not the top

it is better to deploy on the server side.

Answer 2 · 2012-12-07T17:23:44

Replace height: 100% with min-height: 150px for example.

Answer 3 · 2012-12-08T12:39:50

in general

 max-height: <размер>px; overflow:auto;

and still, it is not necessary to set a style in every div ... you can’t change if that happens. use css

ЬЬ_ ЬЬ_ 750 four ten · Answer 4 · 2012-12-08T13:56:07

horror, there is a better way to rewrite everything from scratch and use blocks instead of tables, use css instead of attributes

 <!doctype html> <html> <head> <style> .page { width: 270px; height: 99%; overflow-y: scroll; border: 1px solid #454545; } .post{ width: 235px; margin: 0 0 5px; font-size: 14px; width: 100%; height: auto; float: left; margin: 0 0 10px; } .post img{ float: left; } user{ color: rgba(140,190,50,.9); } .text{ width: 235px; height: auto; float: right; color: rgba(70,70,70,.9); } </style> </head> <body> <div class="page"> <div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div><div class="post"> <img src="https://secure.gravatar.com/avatar/be07a9fd5fc86f541b713e7a460d019b?s=32&d=identicon&r=g"> <div class="user"> kirpich634@gmail.com </div> <div class="text"> Text </div> </div> </div> </body> </html>

Deus deus 1,095 3 nineteen 61 · Answer 5 · 2012-12-08T23:53:48

The table you drive into a div with the attributes of CSS overflow on Ix. And that's all.

Scrolled in the table

5 answers 5

More articles: