Переполнение строк в CGridView Yii

Question

Я использую CGridView, он работает нормально, но у меня есть небольшая проблема. Строки перекрываются (см. Экран ниже), я начинаю использовать Ecolumns Extension для управления столбцами. Но когда-то мне нужно, чтобы отобразить все столбцы, и это не удобно вообще (особенно на мобильных устройствах)

Вот JSFiddle example

Кто-нибудь есть какие-либо идеи о том, как управлять этим, чтобы все строки располагались внутри сетки, даже если все столбцы отображаются, пожалуйста? спасибо

Edit: сгенерированного 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 
     $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 вам нужно для таблицы. Однако, приспосабливая все к ширине окна, он будет выглядеть squishy на меньших экранах. Это также сделает каждую ячейку таблицы равной ширине по умолчанию. Возможно, вы захотите использовать медиа-запрос CSS для применения только к меньшим экранам.

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

Обновлено скрипку: http://jsfiddle.net/37m6ja3v/2/