17

is it possible to put table in scrollable div? I tried, but then displaying bigger table with more rows and columns, distorts others divs, i mean shows in that scrollable div other divs from lower.

Thank you, Best Regards

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Prampam
  • 173
  • 1
  • 1
  • 6

2 Answers2

24

HTML

<div class="table-wrapper">
    <table>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>
    </table>      
</div>

CSS

.table-wrapper
{
    border: 1px solid red;
    width: 100px;
    height: 50px;
    overflow: auto;
}

table
{
    border: 1px solid black;
    margin-right: 20px;
}

td
{
    width: 20px;
    height: 20px;
    background-color: #ccc;
}

JSFiddle

http://jsfiddle.net/gvee/v54Sz/

gvee
  • 16,732
  • 35
  • 50
2

Set a style on your div with the width and height and set overflow to auto

Mark Redman
  • 24,079
  • 20
  • 92
  • 147
  • 1
    actually i did, overflow:auto; overflow-y:scroll; overflow:hidden; is it possible, im getting insue cause that div have possition:relative;? – Prampam Jul 23 '13 at 11:32