Rows Overflow in CGridView Yii - css

Question

I am using CGridView it's working fine but I have a small prob.
The rows overlap (see screen below), I start using Ecolumns Extension to manage the columns.
But sometime I need to display all the columns and it's not convenient at all (specially on mobile devices)
Here is a JSFiddle example
Does anybody have any idea on how to manage that, in order to make all the rows fit inside the Grid even if all the columns are displayed, please ?
thank you
Edit : The Generated HTML code
<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> ****</label></li>
<li class="ui-state-default" id="user_id"><label><input type="checkbox" name="*****-grid-ecolumns[]" value="user_id" checked> User</label></li>
</ul>
<div><input type="submit" onclick="$("#*****-grid-ecolumns-dlg").dialog("close")" style="float: left" name="yt1" value="Apply" />
<input type="button" onclick="$("#*****-grid-ecolumns-dlg").dialog("close"); 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&*****_sort=*****_id">*****</a>
</th>
<th id="*****-grid_c1">
<a class="sort-link" href="/*****/index.php?r=*****/index&*****_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&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>
The PHP Code
<?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

Here is the additional CSS you need for the table. However, by fitting everything to the width of the window, it will look squishy on smaller screens. This will also make each table cell equal width by default. You may want to use a CSS media query to apply this only to smaller screens.
.grid-view table.items {
width: 100%;
table-layout: fixed;
}
Updated fiddle:
http://jsfiddle.net/37m6ja3v/2/