table column alignment mismatch with the table header

Question

I am working on html table with bootstrap css and want to make the table header fixed with scrollable content.

Below is my code demo:

https://plnkr.co/edit/uRJ6WFVWevksH3ip4kct?p=preview

In my the above plunker demo,you can notice that the header is fixed and the content is scolling but the alignment of the column with the header is mismatched.I have given the same width for the <td> as given the width for <th> but still facing the alignment issue. Please advice what changes to be done to make the column of the content and the header matches and the other issue i noticed is some content of the first row is hidden back to the table header. I tried to resolve using different ways in CSS by setting the width of the header and the <td> but unable to make it..

code:

<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
        .header-fixed {
            width: 100%
        }
        .table-fixed thead {
     }
.table-fixed tbody {
  height: 100%;
  width: 100%;
}
thead {
    position: fixed; 
}
 </style> 
 </head>
<body>

<div>
    <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="width:10%;white-space: wrap;text-align: center;">ID</th> 
                        <th style="width:30%;white-space: nowrap;text-align: center;">Description</th>              
                        <th style="width:10%;white-space: wrap;text-align: center;">DoorNum</th>
                        <th style="width:10%;white-space: wrap;text-align: center;">First Name</th>
                        <th style="width:10%;white-space: wrap;text-align: center;">Num of ordered items</th>
                        <th style="width:30%;white-space: wrap;text-align: center;">Desc Comments</th>
                    </tr>
                    </thead>
                    <tbody >

                   <tr>
                        <td style="width:10%;text-align: center;">10</td>
                        <td style="width:30%;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="width:10%;text-align: center; ">798</td>
                        <td style="width:10%;text-align: center; ">Joe</td>
                        <td style="width:10%;text-align: center; ">4</td>
                        <td style="widtg:30%;text-align: center; ">Order dispatched</td>
                    </tr> 
                     <tr>
                        <td style="width:10%;text-align: center;">20</td>
                        <td style="width:30%;text-align: center; "></td>
                        <td style="width:10%;text-align: center; ">798</td>
                        <td style="width:10%;text-align: center; ">Joe</td>
                        <td style="width:10%;text-align: center; ">4</td>
                        <td style="widtg:30%;text-align: center; ">Order dispatched</td>
                    </tr>
                     <tr>
                        <td style="width:10%;text-align: center;">30</td>
                        <td style="width:30%;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="width:10%;text-align: center; "></td>
                        <td style="width:10%;text-align: center; ">Joe</td>
                        <td style="width:10%;text-align: center; ">4</td>
                        <td style="widtg:30%;text-align: center; ">Order dispatched</td>
                    </tr>
                     <tr>
                        <td style="width:10%;text-align: center;">40</td>
                        <td style="width:30%;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="width:10%;text-align: center; ">798</td>
                        <td style="width:10%;text-align: center; ">Joe</td>
                        <td style="width:10%;text-align: center; ">4</td>
                        <td style="widtg:30%;text-align: center; ">Order dispatched</td>
                    </tr>
                     <tr>
                        <td style="width:10%;text-align: center;">50</td>
                        <td style="width:30%;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="width:10%;text-align: center; ">798</td>
                        <td style="width:10%;text-align: center; ">Joe</td>
                        <td style="width:10%;text-align: center; ">4</td>
                        <td style="widtg:30%;text-align: center; ">Order dispatched</td>
                    </tr>
                     <tr>
                        <td style="width:10%;text-align: center;">60</td>
                        <td style="width:30%;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="width:10%;text-align: center; ">798</td>
                        <td style="width:10%;text-align: center; ">Joe</td>
                        <td style="width:10%;text-align: center; ">4</td>
                        <td style="widtg:30%;text-align: center; ">Order dispatched</td>
                    </tr>

                     <tr>
                        <td style="width:10%;text-align: center;">70</td>
                        <td style="width:30%;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="width:10%;text-align: center; ">798</td>
                        <td style="width:10%;text-align: center; ">Joe</td>
                        <td style="width:10%;text-align: center; ">4</td>
                        <td style="widtg:30%;text-align: center; ">Order dispatched</td>
                    </tr>

                     <tr>
                        <td style="width:10%;text-align: center;">8</td>
                        <td style="width:30%;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="width:10%;text-align: center; ">798</td>
                        <td style="width:10%;text-align: center; ">Joe</td>
                        <td style="width:10%;text-align: center; ">4</td>
                        <td style="widtg:30%;text-align: center; ">Order dispatched</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>>
</body>
</html>

look at [this](https://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque/5859976#5859976) — Shadow Fiend, Sep 25 '17 at 04:41

score 1 · Answer 1 · answered Sep 25 '17 at 04:38

1

Set that div width <div class="" style="width: 80%; margin: 0px auto"> to 100%

That,

<div class="" style="width: 100%; margin: 0px auto">

Maybe this can solve your problem.

answered Sep 25 '17 at 04:38

codesayan

1,705
11
22

1

+1 , As mentioned the other issue is some of the content in the first row is hidden and the header and content column alignment is slightly mismatched.. – joann Sep 25 '17 at 04:57

Wim Mertens · Answer 2 · 2017-09-25T22:57:39.907

This is because of the table behaviour. If you set a width for td and th it will still increase if the content is wider. One possible 'fix' would be to set the table-layout to fixed (in css), this will result in all tds and ths to have the same width but this may not be desirable. For smaller screens you can perhaps consider a responsive table. There's a really cool one for the Foundation framework: https://zurb.com/playground/responsive-tables or for Twitter Bootstrap (I see you're using that): https://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table

table column alignment mismatch with the table header

2 Answers2