I am creating a table for data insertion / query that is the most similar to the format of an excel sheet.
My table:
Problem:
As the image above shows, putting input into td , it does not occupy td all, staying with your borders, which is ugly. What I want is to set class css to input so that it occupies the entire dimension of td and it seems that td and input are the same element. p>
What seems to be necessary, although you do not have your markup in your question, is to format the input to remove some of its definitions so that it is occupying all the table cell:
.myCellInput{
display:block; // ficar um elemento bloco
width:100%; // ocupar toda a largura
margin:0; // sem margens
padding:0; // sem padding
border:0 none; // sem borda
line-height:20px; // linha = altura pretendida para a célula
height:20px; // altura = altura pretendida para a célula
}
Notes:
You can see in JSFiddle that some definitions have also been given to the table itself, since we do not want td to have padding space so that input can occupy all its space.
Therefore, links or other elements should receive adequate formatting to compensate.
Another alternative than that mentioned by Zuul, is to use the contenteditable property in the td you want to make editable, as you can follow this example in JSFiddle . Result:
I do not know if I understand what you want, but I suggest you the following Jquery tool:
Via Html:
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/DataTables-1.7.6/jquery.dataTables.min.js" type="text/javascript"></script>
Upload the css: Demo plugin, you can get it by downloading the latest version of this plugin.
<link rel=’stylesheet’ href=’js/DataTables-1.7.6/css/demo_table_jui.css’ />
<link rel=’stylesheet’ href=’js/DataTables-1.7.6/css/demo_table.css’ />
After loading it is necessary to initialize the script
<script type="text/javascript">
$(document).ready(function() {
$(‘#teste’).dataTable( );
} );
</script>
Create Html Physical Table
<table id="teste" width="100%">
<thead>
<tr>
<th>Nome</th>
<th>Email</th>
<th>Sexo</th>
<th>Data Nascimento</th>
<th>Nivel Escolar</th>
<th>Faculdade</th>
</tr>
</thead>
<tbody>
<?php for( $i=0; $i<100; $i++ ){?>
<tr>
<td><?php echo $i;?></td>
<td><?php echo $i+1;?></td>
<td><?php echo $i+2;?></td>
<td><?php echo $i+3;?></td>
<td><?php echo $i+4;?></td>
<td><?php echo $i+5;?></td>
</tr>
<?php }?>
</tbody>
</table>