Non-responsive grid

Hi,

Attached is a file called Unresponsive grid, which shows the result of the code below. As you can see, the text in the Fp column is too long for that column and runs off the screen. Is there a way to make the grid more responsive, for example, locking the first column so that a horizontal scroll bar appears to scroll across the subsequent columns like in the file, responsive grid.

 <div class="row " style="max-width: 98%">
    <div class="columns">
        <div class="full-width">
            @(Html.Kendo().Grid<EPP.AdminPortal.ViewModels.Test>()
                .Name("grid")
                .HtmlAttributes(new { style = "table-layout: fixed, height: 550px;" })
                .Columns(columns =>
                {
                    columns.Bound(c => c.Id).Width(1000);
                    columns.Bound(c => c.Name).Width(2000);
                    columns.Bound(c => c.Email).Width(5000);
                    columns.Bound(c => c.Ap).Width(5000);
                    columns.Bound(c => c.Bp).Width(5000);
                    columns.Bound(c => c.Cp).Width(5000);
                    columns.Bound(c => c.Dp).Width(5000);
                    columns.Bound(c => c.Ep).Width(5000);
                    columns.Bound(c => c.Fp).Width(200);
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("T_Read", "Test"))
                )
                //.Groupable()
                .Sortable()
           )
        </div>
    </div>
</div>