Применить конкретную ширину в столбце WebGrid в MVC3

Question

Я использовал WebGrid , чтобы воспользоваться встроенной сортировкой и разбиением на страницы в приложении MVC, и это работало очень хорошо, только одна проблема, которую я не мог исправить, и ищу здесь чью-либо помощь

Моя сетка выглядит так, как показано ниже

@{
        var grid = new WebGrid(Model, canSort: true, canPage: true, rowsPerPage: 10);
        grid.Pager(WebGridPagerModes.NextPrevious);
        @grid.GetHtml(columns: grid.Columns(

        grid.Column("Name", "Name", canSort: true),
        grid.Column("Address", "Address", canSort: true),        
        //other columns
        ));
  }

Как я могу зафиксировать ширину каждого столбца в соответствии с моим требованием? (нужна разная ширина для другого столбца)

Answer 1

Вы можете использовать стили:

@grid.GetHtml(columns: grid.Columns(
    grid.Column("Name", "Name", canSort: true, style: "name"),
    grid.Column("Address", "Address", canSort: true, style: "address")
));

и в вашем файле CSS:

.name {
    width: 50px;
}

.address {
    width: 300px;
}

Answer 2

Чтобы добавить к хорошему совету Дарина Димитрова, рекомендовал бы далее соглашение (поскольку CSS способствует повторному использованию), попробуйте использовать существующие или общие стили для часто используемых элементов (например, столбцов) - помните, что вы можете применять несколько стилейи здесь через пробел - они просто будут объединены в результирующий атрибут.

@{
    var grid = new WebGrid(Model, canSort: true, canPage: true, rowsPerPage: 10);
    grid.Pager(WebGridPagerModes.NextPrevious);
    @grid.GetHtml(columns: grid.Columns(

    grid.Column("Name", "Name", canSort: true, style: "col-sm cssStyle2"),
    grid.Column("Address", "Address", canSort: true, style: "col-med address"),        
    //other columns
    ));

}

/*styles*/
.col-sm { width: 100px; min-width: 90px; }
.col-med { width: 150px; min-width: 120px; }  <--could be reused
.address { font-weight: bold; } <-- could be reused
.cssOther3 { font-weight: bold; }  <-- may not be as not as reusable
.cssStyle2 { text-align: right; }  

То есть вы не застрялис пакетом единого стиля, сохраняйте гибкость при применении «повторного использования».

Answer 3

Только CSS

/*IE7+*/  
th:first-child  { width:30px; }  
th:first-child + th { width:30px; }  
th:first-child + th + th  { width:100px; }  
/*IE9 +*/  
th:nth-of-type(1) { width:30px; }  
th:nth-of-type(2) { width:30px; }  
th:nth-of-type(3) { width:100px; }  
th:nth-of-type(4) { width:200px; }  
th:nth-of-type(5) { width:40px; }