I want to change background color of header for all my GridView
headers in Yii2. I know the following code does this work but I want to change only once, all of headers of the same color.
code:
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
[
'attribute' => 'user_id',
'headerOptions' => ['style' => 'background-color:#ccf8fe'],
],
],
]); ?>
What is should I do?
Adding style options to each column seems to be the only way, but I can't guarantee. However, you're not limited to only that. The workaround solution:
1) Add this code somewhere in GridView::widget
(for example, above columns => [...]
:
// ...
'filterModel' => $searchModel,
'options' => [
'class' => 'YourCustomTableClass',
],
// ...
2) Add new style rules to it (in css
file):
.YourCustomTableClass table thead {
background-color: #FF0000;
}
CSS will apply background color (red) for header in each column. I have tested this myself to confirm it works.
Since there is already a default class on the gridview container,
you don't need to change your gridview config, you should simply use this css rule :
.grid-view table thead {
background-color: #FF0000;
}