CODEWITHSUNDEEP
htmlcss
John Smith
John Smith

Reputation: 407

How can I put this div scroll using display: table?

I have this sample:

link

CODE HTML:

<div id="wrap">
  <div id="scrollable">
    <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
  </div>
</div>

CODE CSS:

#wrap{
  display:table;  //Here is the problem
  background: #F7F7F7;
}
#scrollable{
  overflow-y:auto;
}
table{
  min-width:1000px;
}

If you get "display: table" when everything works properly but I do not want to give up on him.

I want to make scrolling table.

It can do this?practicaly I want to div #scrollable have scroll but without canceling the "display: table"

Can you help me find a solution to this problem please?

Thank you!

Upvotes: 3

Views: 88

Answers (3)

Amitesh Kumar
Amitesh Kumar

Reputation: 3079

add this CSS : 

table{
  min-width:1000px;
  overflow-y:scroll;
   height:50px;
   display:block;
}

For Horizontal : 

table{
  width:100px;
  overflow-y:scroll;
   display:block;
}

Demo

Upvotes: 0

GibboK
GibboK

Reputation: 73988

You can consider using the wrapper for controlling the overflow and apply display:table only to your table element.

Example below.

#wrap {
  height: 100px;
  width: 450px;
  background: #F7F7F7;
  overflow-y: scroll; // make the wrapper scrollable
  overflow-x: none;
}

#table {
  display: table; // apply table layout
}
<div id="wrap">
  <div id="scrollable">
    <table class="table">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Upvotes: 0

satya
satya

Reputation: 1185

Please try this:

Mention some height for #scrollable

like 

#scrollable{
  overflow-y:auto;
height:100px
}

Upvotes: 1

Related Questions