1

I am trying to create a table with fixed header and scrollable content using Bootstrap.I have gone through many examples but none of them seems to be perfectly working with my code. Either the column alignment is missing or the content itself is not getting a scrollbar to scroll.

Source : I have taken the below example from bootstrap code to fix table header , but it doesn't have any solutions to follow.

Example link to be fixed : https://plnkr.co/edit/5285K3dt5aErj3ZgrzIl?p=preview

HTML code:

    <div class="modal-body">
        <div class="row">
            <div class="" style="width: 80%; margin: 0px auto">
                <table  class="table table-bordered header-fixed" style="border :1px">
                    <thead>
                    <tr style="background-color: #cdd0d6;">
                        <th style="white-space: wrap;text-align: center;">ID</th> 
                        <th style="white-space: nowrap;text-align: center;">Description</th>              
                        <th style="white-space: wrap;text-align: center;">DoorNum</th>
                        <th style="white-space: wrap;text-align: center;">First Name</th>
                        <th style="white-space: wrap;text-align: center;">Num of ordered items</th>
                        <th style="white-space: wrap;text-align: center;">Desc Comments</th>
                    </tr>
                    </thead>
                    <tbody >
                    <tr>
                        <td style="text-align: center;">10</td>
                        <td style="text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
                        <td style="text-align: center; ">798</td>
                        <td style="text-align: center; ">Joe</td>
                        <td style="text-align: center; ">4</td>
                        <td style="text-align: center; ">Order dispatched</td>
                    </tr>
....
</div>

PS: I have followed many links and tried to implement, but have not got the solution yet.

halfer
  • 19,824
  • 17
  • 99
  • 186
dexter
  • 117
  • 1
  • 9

1 Answers1

2

Simply

thead {
    position: fixed; 
}
jack
  • 1,391
  • 6
  • 21
  • Pease find the updataed plunker https://plnkr.co/edit/HMkuc3oUz1Le4QvMn78d?p=preview with your solution. The column alignment got mismatched and i think it is because of the space occupied by the scrollbar on the left side. Please advice. – dexter Sep 25 '17 at 01:17
  • I am sorry, but this is another question. In this site questions are solved one at a time. You asked something. I provided a working answer. The rest is up to you. Optionally, you can post another question about that issue. – jack Sep 25 '17 at 12:50