CODEWITHSUNDEEP
htmlcss
Kousher Alam
Kousher Alam

Reputation: 1055

Table horizontal scrollbar getting extra space.

I'm trying to build a scrollable table, so I put my table inside a div(#tableScroll) and add this CSS to the table wrapper div. 

#tableScroll {
    max-height: 320px;
    overflow: auto;
}

Here my HTML page screenshot. enter image description here

But I'm getting an extra space please look the screenshot. enter image description here

then I inspect the element and find that table tbody height is responsible for this extra space.

Please see the inspect screenshot enter image description here

Please give me your thought / Idea, It will be very helpful to me.

Upvotes: 0

Views: 556

Answers (3)

CodeZombie
CodeZombie

Reputation: 2087

just replace #tableScroll by class .table-responsive.

<div class="m-b-5">
 <div class="table-responsive">

Upvotes: 1

Kenry Sanchez
Kenry Sanchez

Reputation: 1743

I see the id for the table is bulkTableif you need that height for your tableScroll is one thing and another thing is to give to the bulkTable a horizontal scroll, for that you just should use in your CSS overflow-x: auto

#bulkTable {
  overflow-x: auto; }

I hope it can help you :D

Upvotes: 0

csilk
csilk

Reputation: 2932

Try changing it to overflow: scroll; instead, auto just lets the browser decide

#tableScroll {
    max-height: 320px;
    overflow: scroll;
    height: 320px;
    display: block;
}

Upvotes: 0

Related Questions