如何控制yii2 detailView中的行高和单元格填充？

Question

我想减少详细视图的大小。我可以通过css减小字体大小，但不能减小生成的表的行大小或填充。

<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

在interessed领域增添风采例如

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

Answer 2

首先，尽量把!important最后的CSS行的末尾：

td { padding:0px !important; height: 5px !important; } 

而且最好是在CSS选择器更加具体。因此，像这样比较好：

#your-table-id tr { line-height: 30px !important; } 

如果没有工作，尝试添加CSS样式的小工具里面以这样的方式

<?= DetailView::widget([ 
      'model' => $model, 
      'attributes' => [ 
       [      
        'label' => 'ID', 
        'value' => $model->id, 
        'options' => ['style' => ' line-height: 30px'] 
       ], 
       ... 
      ], 
     ]) ?>