so I working in this an use this information:
http://elvery.net/de...ponsive-tables/
http://css-tricks.co...ve-data-tables/
so i do this:
in a flexigrid.css copy this code
@media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
#flex1 table,
#flex1 thead,
#flex1 tbody,
#flex1 th,
#flex1 td,
#flex1 tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#flex1 thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#flex1 tr { border: 1px solid #ccc; }
#flex1 td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
#flex1 td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
#flex1 td:before { content: attr(data-title); }
}
at end of file, change the property of thead of table, becouse when reduce the space one item show empty.
this is a css part, but have to change the view, so i have to edit the file list.php in a template/view folder, so in the line 6 tag <table> add a class
class="table-bordered table-striped table-condensed cf"
I need to know a name of colum so i create an array with the name of colum, and in the foreach of colums i insert a data-title option in <td> tag to know the name of the colum, and remobe the class of <tr> items
so this is the code in the head of table
<?php
//contador utilizado para el arreglo de nombres de las columnas
$i=0;
foreach($columns as $column){?>
<th>
<div class="text-left field-sorting <?php if(isset($order_by[0]) && $column->field_name == $order_by[0]){?><?php echo $order_by[1]?><?php }?>"
rel='<?php echo $column->field_name?>'>
<?php echo $column->display_as;
//almacenamos el nombre de la columna en el arreglo
$nombres[$i]=$column->display_as;
//aumentamos el i
$i++;
?>
</div>
</th>
and this is the code in the content of table
foreach($list as $num_row => $row){ ?>
<tr>
<?php
//contador para sacar el nombre de la columna y asignarlo a los datos
//se inicializa aqui adentro para que con cada fila se reinicie.
$j=0;
foreach($columns as $column){
//data-title es el atributo utilizado para poner el nombre de la columna
?>
<td data-title='<?php echo $nombres[$j] ?>' class='<?php if(isset($order_by[0]) && $column->field_name == $order_by[0]){?>sorted<?php }?>'>
<div style="width: 100%;" class='text-left'><?php echo $row->{$column->field_name}; ?></div>
</td>
<?php
//aumentamos j
$j++;
}?>
only put the code that i modify.
thanks all.
i can't to upload a image, but the result is very gread!!
sorry for my English