1

Trying to create table scrollable.

But it is displaying as: enter image description here.

I wanted as: enter image description here with scroll.

I tried:

<style>
table.scroll tbody,
table.scroll thead { display: block; }



table.scroll tbody {
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

</style>
<script>
// Change the selector if needed
var $table = $('table.scroll'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();

    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });    
}).resize(); // Trigger resize handler
</script>

I want a table which has scroll effect in it tbody

MKJ
  • 133
  • 1
  • 1
  • 11

2 Answers2

0

you align everything correctly with forgot to give the width to the main table which is the reason you did get the required output Try

table.scroll,table{width:100%;}

this will give the table a full width and you will get the required output

Rushabh Sheth
  • 177
  • 1
  • 8
0

Try doing by putting css as below

table
{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

Which may work.

waka
  • 3,362
  • 9
  • 35
  • 54
Aqib Zaman
  • 265
  • 2
  • 8
  • 17
  • Tried, but nothing changed! – MKJ Oct 27 '17 at 09:52
  • Or try the below link.It's a duplicate question actually. Try this link https://stackoverflow.com/questions/5533636/add-horizontal-scrollbar-to-html-table – Aqib Zaman Oct 27 '17 at 09:54
  • I have tried with https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody, will then also it can be a duplicate? – MKJ Oct 27 '17 at 09:58