How can I control row height and cell padding in yii2 detailView? - html

Question

I want to decrease the size of a detail view. I was able to decrease font-size through css, but can not decrease row size or padding of the generated table.
<div class="col-md-3">
<?= DetailView::widget([
'model' => $model,
'attributes' => [
'id',
'jmn',
'pri',
'rci',
'adr',
'tel',
'eml',
],
]) ?>
</div>
css
.detail-view {
font-size: 10px; -> this works
}
td {
padding: 0px; -> this doesnt do anything
margin: 0px; -> this doesnt do anything
background:green; -> this works (a test :-)
}
tr { line-height: 30px; } -> this doesnt do anything

Answer 1

Add style in the interessed field e.g.
<div class="col-md-3">
<?= DetailView::widget([
'model' => $model,
'attributes' => [
'id',
'jmn',
....
[
'attribute' => 'attribute_name',
....
'options' => ['style' => 'width:90px;'],
.....
],
....
]) ?>
</div>

Answer 2

First, try to put !important at the end of last css line:
td { padding:0px !important; height: 5px !important; }
Also it's better to be more specific in css selector. So something like this is better:
#your-table-id tr { line-height: 30px !important; }
If did not work, try to add css style inside the widget in this way:
<?= DetailView::widget([
'model' => $model,
'attributes' => [
[
'label' => 'ID',
'value' => $model->id,
'options' => ['style' => ' line-height: 30px']
],
...
],
]) ?>