MVC webgrid column width not adjusting

Question

My client wants a grid that has 17 columns, with a horizontal scroll bar. I'm using a webgrid. But all the columns are squished and the column content wraps in the small space making it hard to read. I've tried adding css to make several of the columns a percent. But the columns don't adjust. The column with 30% is the same size as the rest of the columns.

Any help would be appreciated.

CSS:

.column-10-percent-wide {
   width: 10%;
}

.column-20-percent-wide {
   width: 20%;
}

.column-30-percent-wide {
   width: 30%;
}

Webgrid code:

@{ var details = Model.Details;

                if (details != null)
                {
                    var grid = new WebGrid(
                        
                                    canPage: true,

                                        rowsPerPage: Model.PageSize,

                                        canSort: true,

                                        ajaxUpdateContainerId: "grid"
                                        
                                        )
                        ;

                    grid.Bind(Model.Details, rowCount: Model.TotalRecords, autoSortAndPage: false);

                    grid.Pager(WebGridPagerModes.All);

                    @grid.GetHtml(htmlAttributes: new { id = "grid" },

             fillEmptyRows: false,

             tableStyle: "table table-bordered table-fixed-width table-hover table-border-rounded grid-text-font",

             mode: WebGridPagerModes.All,
            
             columns: grid.Columns(
                  grid.Column("RequestId", "Req #", style: "column-10-percent-wide"),

                  grid.Column("Description", "Description", style: "column-30-percent-wide"),

                  grid.Column("FacilityName", "Facility", style: "column-20-percent-wide"),

                  grid.Column("StatusDescription", "Status", canSort: true, style: "column-10-percent-wide"),

                  grid.Column("DateCreated", "Date Created", canSort: true, style: "column-10-percent-wide"),

                  grid.Column("Initiator", "Initiator", canSort: true, style: "column-20-percent-wide"),

                  grid.Column("Amount", "Amount", canSort: true, style: "column-10-percent-wide"),

                  grid.Column("Signers", "Signers", canSort: true, style: "column-10-percent-wide"),

                  grid.Column("Bank", "Bank", canSort: true, style: "column-10-percent-wide"),

                  grid.Column("FacilityCode", "FacilityCode", canSort: true, style: "column-10-percent-wide"),

                  grid.Column("Date", "Date", canSort: true, style: "column-10-percent-wide"),

                  grid.Column("Notes", "Notes", canSort: true, style: "column-10-percent-wide"),

                  grid.Column("DateSigned", "DateSigned", style: "column-10-percent-wide"),

                  grid.Column("AssignedTo", "Assigned To", style: "column-10-percent-wide"),

                  grid.Column("Days_Since_Diagnosis", "Days Since Diagnosis", style: "column-10-percent-wide"),

                  grid.Column(header: "View Dashboard", canSort: false, style: "action",

                    format: @<text>

                    @Html.Raw("<a data-modal='' href='/OpenLine/Dashboard/" + item.RequestId + "' title='View Dashboard'> <span class='glyphicon glyphicon-folder-open'> </span> </a>")

                    </text>)

            ));

            }

            }