Yii2 GridView无法设置列宽

this is the first time I am using the Yii2 GridView Widget. I have tried setting a column's width after reading some answers here on *, but it just won't work for me and I would love it if the columns had different widths (especially the first one).

这是我第一次使用Yii2 GridView Widget。我在*上读了一些答案后尝试设置列的宽度,但它对我不起作用,如果列的宽度不同(特别是第一个),我会很喜欢它。

I have tried setting the width using 'contentOptions' directly for the first column and also with an external CSS file for the product name column.

我已尝试直接使用'contentOptions'为第一列设置宽度,并使用外部CSS文件设置产品名称列。

Can someone please tell me if there is an alternative or if there is something I am doing wrong?

有人可以告诉我,如果有替代方案,或者有什么我做错了吗?

 <?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        [
            'class' => 'yii\grid\SerialColumn',
            'contentOptions' => ['style' => 'max-width:20px;'],
        ],

        [
            'format' => 'raw', 
            'label' => 'Image',
            'value' => function ($data) { 
                $url = $data->imgSrc;
                return Html::img($url, ['width' => '40px']);
            },
        ],

        [
            'attribute' => 'name',
            'format' => 'raw',
            'label' => 'Product name',
            'contentOptions' => function ($model, $key, $index, $column) {
                return ['class' => 'tbl_name'];
            },
        ],
    ],
]); ?>

8 个解决方案

#1

If you want set width for single column you can use headerOptions:

如果要为单列设置宽度,可以使用headerOptions:

[
  'attribute' => 'attribute_name',
   'headerOptions' => ['style' => 'width:20%'],
],

#2

you have to set it like this:

你必须像这样设置:

<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            [
                'attribute'=>'title',
                'contentOptions' => ['style' => 'width:200px; white-space: normal;'],
            ],
        ]
    ]
);
?>

With contentOptions you can set options to all td for the column "title". In Site.css is white-space set to nowrap by default.

使用contentOptions,您可以为“title”列设置所有td的选项。在Site.css中,默认情况下将白色空间设置为nowrap。

.grid-view td {
    white-space: nowrap;
}

But if your content is longer than 200px for example, the col will be expand by content and ignores your with.

但是,如果您的内容超过200像素,则col将按内容展开并忽略您的内容。

#3

This could be the result of white-space css property, that will affect the table cell width depending on content in it. In my Yii2 project I had:

这可能是white-space css属性的结果,它会影响表格单元格的宽度,具体取决于其中的内容。在我的Yii2项目中,我有:

.grid-view td {
    white-space: nowrap;
}

No one from advices provided here was not usefull for me. But this was usefull:

这里提供的建议中没有人对我没用。但这很有用:

.grid-view td {
  white-space:pre-line; // or just 'normal'
}

#4

It depends on what you trying to achieve. But max-width with 20 pixels is probably not what you actually wanted. Try it with width:

这取决于你想要达到的目标。但是20像素的最大宽度可能不是你真正想要的。尝试宽度:

[
    'class' => 'yii\grid\SerialColumn',
    'contentOptions' => ['style' => 'width:100px;'],  // not max-width
],

#5

First add Option like

首先添加选项

GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'options' => [ 'style' => 'table-layout:fixed;' ],

after that add below lines

之后添加以下行

[
    'attribute' => 'news_description',
    'contentOptions' => [ 'style' => 'width: 25%;' ],
],

#6

Try with just Options:

尝试使用选项:

 [
        'class' => 'yii\grid\SerialColumn',
        'options' => ['style' => 'max-width:20px;'],
 ],

#7

The only solution that has entirely solved the problem was the one suggested by https://*.com/users/2053862/rostyslav-pylypenko: Here is the trick:

完全解决问题的唯一解决方案是https://*.com/users/2053862/rostyslav-pylypenko建议的解决方案:这是诀窍:

td {
  white-space:normal !important;
}

#8

I simple but functional solution is to create a CSS setting a max-width for the columns. The !important flag is to ensure that this property doesn't get overrriden.

我简单但功能性的解决方案是创建一个CSS设置列的最大宽度。 !important标志用于确保此属性不会被覆盖。

td {
  max-width: 800px;
  white-space: normal !important;
}

Then, you just register it in your view.

然后,您只需在视图中注册即可。

$this->registerCssFile('css/tableColumnMaxWidht.css');

We have and example of this table working in this image here.

我们有这个表的例子在这里工作。

#1