How to prevent misalignment while rendering Schedule inside Tab control ?

@{Html.EJ().Tab("defaultTabs").ClientSideEvents(c=>c.ItemActive("onItemActive")).Items(data =>

        {

        data.Add().ID("worldwar").Text("World War Z").ContentTemplate(@<div>

        <table>

            <tr>

                <td class="movies-img" valign="top">

                    <img src="@Url.Content("~/Content/wwz.png")" alt="mos" />

                </td>

                <td valign="top">

                    <div>

                        <span class="movie-header">World War Z</span><br />

                        <span>Movie Info:</span>

                        <p>

                            The story revolves around United Nations employee Gerry Lane (Pitt).

                        </p>

                    </div>

                </td>

            </tr>

        </table>

    </div>);

            data.Add().ID("Schedule").Text("Schedule Widget").ContentTemplate(@<div>

        @(Html.EJ().Schedule("Schedule1").Height("525px"))

    </div>);

        }).Render();}

function onItemActive(args) {

          if (args.activeIndex == 1) { // 1 denotes the Scheduler tab index

              var obj = $("#Schedule1").data("ejSchedule");

              obj.refreshScroller();// it will refresh the scroller and prevent misalignment

          }

      }