0

As title. My table is displayed using DIVs like this…

<div id='MyTable' style='display:table;'>
    <div id='MyTHead' style='display:table-header-group;'>
        <div style='display:table-row;'>
            <div style='display:table-cell;'>THA</div>
            <div style='display:table-cell;'>THB</div>
        </div>
    </div>
    <div id='MyTBody' style='display:table-row-group;width:100%;height:100%;'>
        <div style='display:table-row;'>
            <div style='display:table-cell;'>TD1A</div>
            <div style='display:table-cell;'>TD1B</div>
        </div>
        <div style='display:table-row;'>
            <div style='display:table-cell;'>TD2A</div>
            <div style='display:table-cell;'>TD2B</div>
        </div>
    </div>
</div>

There are 2 rows in my div play as TBODY. In my developing system. Amount of rows in that div will change by user query. I've read (HTML table with 100% width, with vertical scroll inside tbody) but that table use real element not by div. I also use jQuery to dynamically set the max-height of 'MyTBody' at initialization and window.resize but no effects. How could I make a scroll on 'MyTBody' if too many rows in 'MyTBody' div?

Gary Lu
  • 53
  • 1
  • 2
  • 11

2 Answers2

0

Can try it - 

#MyTBody {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  height: calc(50vh - 18px);
  overflow: auto;
}
[style='display:table-row;']{
  display: flex !important;
  justify-content: stretch;
  width: 100%;
  flex-grow: 1;
}
[style='display:table-cell;']{
  line-height: 30px;
  height: 30px;
  flex-grow: 1;
}
<div id='MyTable' style='display:table;width: 100%;'>
    <div id='MyTHead' style='display:table-header-group;'>
        <div style='display:table-row;'>
            <div style='display:table-cell;'>THA</div>
            <div style='display:table-cell;'>THB</div>
        </div>
    </div>
    <div id='MyTBody' style='display:table-row-group;'>
        <div style='display:table-row;'>
            <div style='display:table-cell;'>TD1A</div>
            <div style='display:table-cell;'>TD1B</div>
        </div>
        <div style='display:table-row;'>
            <div style='display:table-cell;'>TD2A</div>
            <div style='display:table-cell;'>TD2B</div>
        </div>
        <div style='display:table-row;'>
            <div style='display:table-cell;'>TD2A</div>
            <div style='display:table-cell;'>TD2B</div>
        </div>
        <div style='display:table-row;'>
            <div style='display:table-cell;'>TD2A</div>
            <div style='display:table-cell;'>TD2B</div>
        </div>
        <div style='display:table-row;'>
            <div style='display:table-cell;'>TD2A</div>
            <div style='display:table-cell;'>TD2B</div>
        </div>
        <div style='display:table-row;'>
            <div style='display:table-cell;'>TD2A</div>
            <div style='display:table-cell;'>TD2B</div>
        </div>
        <div style='display:table-row;'>
            <div style='display:table-cell;'>TD2A</div>
            <div style='display:table-cell;'>TD2B</div>
        </div>
    </div>
</div>
Yadab Sd
  • 591
  • 4
  • 9
0

Following the answer to the link you've provided in your question, you can achieve the same result by altering a bit of his answer to meet your requirement.

CSS

.table { display: table; width: 100%; }
.thead, .tbody { display: block; }
.tr { display: table-row; }
.td { display: table-cell; }

.tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

HTML

<div id='MyTable' class="table">
    <div id='MyTHead' class="thead">
        <div class="tr">
            <div class="td">Header 1</div>
            <div class="td">Header 2</div>
            <div class="td">Header 3</div>
            <div class="td">Header 4</div>
        </div>
    </div>
    <div id='MyTBody' class="tbody">
        <div class="tr">
            <div class="td">Veniam mollit ullamco ullamco anim ea aute magna Lorem et Lorem.</div>
            <div class="td">Officia ad minim deserunt veniam elit elit eu veniam ea minim.</div>
            <div class="td">Nisi Lorem laborum ipsum qui officia cupidatat mollit.</div>
            <div class="td">Enim ipsum sint eiusmod aute.</div>
        </div>

        ...

        <div class="tr">
            <div class="td">Commodo ipsum veniam qui nostrud aliqua ex sint culpa ipsum minim.</div>
            <div class="td">Nulla cupidatat ex amet aute laboris officia ipsum.</div>
            <div class="td">Eu minim nostrud ex occaecat anim ipsum nostrud reprehenderit.</div>
            <div class="td">Laboris fugiat velit proident consectetur incididunt esse qui velit.</div>
        </div>
    </div>
</div>

Javascript

// Get jQuery first

// Altering a bit from the answer provided by Hashim Qolami in provided link above
$(function() {
    // Change the selector if needed
    var $table = $('.table'),
    $bodyCells = $table.find('.tbody .tr:first').children(),
    colWidth;

    // 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]); });
});
azizanhaniff
  • 31
  • 2