DataTables - header column width not aligned with body column width

[Joel]

Hi,

  I am using DataTables from DataTables in TabStrip.

  I figure i faced the same problem as mentioned here: datatable jquery - table header width not aligned with body width

  There was a solution mentioned in the blog that works for Bootstrap Tab:

// If table is in the tab, you need to adjust headers when tab becomes visible.
// For example, for Bootstrap Tab plugin:
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
   $($.fn.dataTable.tables(true)).DataTable().columns.adjust();});

 

   How can i do that for telerik TabStrip?

Here is my TabStrip in cshtml:

<div class="col-md-9 k-content wide">
    @(Html.Kendo().TabStrip()
                .Name("tabstrip")
                .Animation(animation =>
                      animation.Open(effect =>
                          effect.Fade(FadeDirection.In)))
                  .Items(tabstrip =>
                  {
                      tabstrip.Add().Text("OEE")
                          .Selected(true)
                          .Content(@<text>
                            </text>);

                        tabstrip.Add().Text("System Performance")
                            .Content(@<text>
                                <div class="container">
                                    <div class="row">
                                        <div class="col-5">
                                            <table id="systemPerfTable" class="table table-striped table-bordered" cellspacing="0">
                                                <thead>
                                                    <tr>
                                                        <th>Item</th>
                                                        <th>Value</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <th scope="row">Lot Elapsed Timestamp</th>
                                                        <td id="lotElapsedTimestamp">1/1/1900 00:00:00</td>
                                                    </tr>
                                                    <tr>
                                                        <th scope="row">Lot Submission Timestamp</th>
                                                        <td id="lotSubmissionTimestamp">1/1/1900 00:00:00</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </text>);
                   })
    )
</div>

 

Here is the script:

<script>
        $("#systemPerfTable").DataTable({
            scrollY: "500px",
            scrollCollapse: true,
            paging: false,
            searching: false,
            ordering: false,
            info: false
        });
</script>

[Petar]

Hi Joel,

The reported scenario seems to be triggered by the scrollY configuration of the DataTables. Attached to this reply you will find a runnable project in which the table you provided is defined in a PartialView. If we comment on the scrollY: "500px" line, the table headers are aligned as expected. In order to align the headers with the uncommented scrollY configuration, we have to apply some CSS configurations and manipulate the DOM tree with jQuery. 

Here are the modifications presented in the attached project:

• CSS

    .col-5 {
        max-width: initial;
            width:900px !important;
    }

    .table {
        margin-bottom:initial;
    }
    
    .table.table-striped.table-bordered.dataTable.no-footer {
        width: 445px !important;
    }

• jQuery

    var headers = $(".sorting_disabled");
    $(headers[0]).width(290);
    $(headers[1]).width(179);

In order to configure tables with other data, some modification would be needed to display the data and the headers correctly. 

Another thing I would suggest to use is our Grid component. If there is no need to work with the DataTables project, I would recommend trying our Grid which is optimized for working with all Kendo UI components and styling issues like the current one shouldn't even be discussed.

If you need further assistance with the current case, please let me know.   

Regards,
Petar
Progress Telerik

[Joel]

Hi Peter,

  You are right. Should have used the Grid component!

   Working well now with Grid component.

   Thanks.

[Petar]

Hi Joel,

I am happy the Grid component is helping you to accomplish the desired scenario! If you have any questions regarding the Grid, we would be happy to help. 

Regards,
Petar
Progress Telerik