CGridView Yii中的行溢出

Question

我正在使用CGridView它工作正常，但我有一个小概率。 行重叠（参见下面的屏幕），我开始使用Ecolumns Extension来管理列。 但是有时我需要显示所有列并且它根本不方便（特别是在移动设备上）

这是JSFiddle example

有没有人知道如何管理它，为了使所有行都适合Grid，即使显示了所有列，请？ 谢谢

编辑：生成的HTML代码

<div style="display: none" id="*****-grid-ecolumns-dlg">
<form id="*****-grid-ecolumns" action="/*****/index.php?r=*****" method="POST">
<input type="hidden" value="1" name="*****-grid-ecolumns-set" id="*****-grid-ecolumns-set" />
    <ul id="yw1">

<li class="ui-state-default" id="*****"><label><input type="checkbox" name="*****-grid-ecolumns[]" value="****" checked>&nbsp;****</label></li>
<li class="ui-state-default" id="user_id"><label><input type="checkbox" name="*****-grid-ecolumns[]" value="user_id" checked>&nbsp;User</label></li>

    </ul>
<div><input type="submit" onclick="$(&quot;#*****-grid-ecolumns-dlg&quot;).dialog(&quot;close&quot;)" style="float: left" name="yt1" value="Apply" />
<input type="button" onclick="$(&quot;#*****-grid-ecolumns-dlg&quot;).dialog(&quot;close&quot;); return false;" style="float: right" name="yt0" value="Close" />
<input type="button" class="reset" value="Reset" style="float: right">
    </div></form></div>

    <div class="grid-view rounded" id="*****-grid">
<a class="ecolumns-link" id="*****-grid-ecolumns-dlg-link" href="#">Settings</a>
<div class="summary">Displaying 1-50 of 556 results.</div>
<table class="items">
<thead><tr>
<th id="*****-grid_c0">
<a class="sort-link" href="/*****/index.php?r=*****/index&amp;*****_sort=*****_id">*****</a>
</th>
<th id="*****-grid_c1">
<a class="sort-link" href="/*****/index.php?r=*****/index&amp;*****_sort=user_id">User</a></th>
</thead>
<tbody>
<tr class="odd">
<td>*</td><td>*</td>
<td>***</td><td>***</td>
<td>***</td><td></td>
<td></td><td></td>
<td>***</td><td></td>
<td></td><td></td>
<td>***</td><td>***</td>
<td class="button-column"><a class="update" title="Update" href="/*****/index.php?r=*****/update&amp;id=4">
<img src="/******/gr-update.png" alt="Update" /></a>
<a title="Edit" href="****">
<img src="****/home.jpg" alt="edit" />
</a></td></tr>
</tbody></table> </div>

PHP代码

<?php 
        $dialog = $this->widget('ext.ecolumns.EColumnsDialog', array(
               'options'=>array(
                    'title' => 'Table Settings',
                    'autoOpen' => false,
                    'show' =>  'fade',
                    'hide' =>  'fade',
                ),
               'htmlOptions' => array('style' => 'display: none'), //disable flush of dialog content
               'ecolumns' => array(
                    'gridId' => '*****-grid', //id of related grid
                    'storage' => 'session',  //where to store settings: 'db', 'session', 'cookie'
                   // 'fixedLeft' => array('CCheckBoxColumn'), //fix checkbox to the left side 
                    'model' =>$dataProvider->model, //model is used to get attribute labels

                    'columns'=>array(
                        '*****_id',
                        'user_id',
                        ....
                        ....

                        array('header'=>'Operations',
                            'class'=>'CButtonColumn',
                                            'viewButtonImageUrl' => Yii::app()->baseUrl . '/css/gridViewStyle/images/' . 'gr-view.png',
                                            'updateButtonImageUrl' => Yii::app()->baseUrl . '/css/gridViewStyle/images/' . 'gr-update.png',
                                            //'deleteButtonImageUrl' => Yii::app()->baseUrl . '/css/gridViewStyle/images/' . 'gr-delete.png',
                                        'template'=>'{update}{edit}',

                        ),
                    ),
                ),  
)); 

$this->widget('zii.widgets.grid.CGridView', array(
        'id' => '*****-grid',
        'dataProvider'=>$dataProvider,
        'template' => $dialog->link()."{summary}\n{items}\n{pager}",
       'pager' => array('cssFile' => Yii::app()->baseUrl . '/css/gridViewStyle/gridView.css'),
       'cssFile' => Yii::app()->baseUrl . '/css/gridViewStyle/gridView.css',
       'htmlOptions' => array('class' => 'grid-view rounded'),
        'columns' => $dialog->columns(),
    //'itemView'=>'_brochureview',
    //'columns' => 3
    //'filter'=>$model,
    ));

?>

Answer 1

以下是表格所需的其他CSS。但是，通过将所有东西都安装到窗户的宽度上，它会在较小的屏幕上显得柔软。这也将使每个表格单元格默认等于宽度。您可能希望使用CSS媒体查询将其仅应用于较小的屏幕。

.grid-view table.items {
    width: 100%;
    table-layout: fixed;
}

更新小提琴： http://jsfiddle.net/37m6ja3v/2/