table content fluid with bootstrap, new template

Hi, im working in a own template, with bootstrap, and i have to do a table content fluid for mobiles.

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

table content fluid with bootstrap, new template

carlinchisart

dutto