8
I am creating a table for insertion/query of data that is the closest to the format of an excel sheet.
My table:
Problem:
As the image above shows, when placing a input in a td, it does not occupy the td all of it, getting its edges, which is ugly. What I intend is to define a class css to the input so that it occupies the whole dimension of td and seeming that the td and the input were the same element.
10
Which seems necessary, even though you don’t have yours Markup in your question, is to format the input to remove some of its settings so that it is occupying the entire 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, because we don’t want the td have type space padding so that the input can occupy all its space.
Therefore, links or other elements should receive appropriate formatting to compensate.
That’s exactly what I was looking for! Thank you ;)
Pity we can not vote +2, the fact to use line-height!
2
Another alternative to the one cited by Zuul is to use the property contenteditable in the td that you want to make editable, as you can follow by this example on Jsfiddle. Upshot:
Although Zuul’s was the most complete answer, when quoting contenteditable yours is also a good answer
0
I’m not sure I understand what you want but I point out a 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>
Load 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 you need to initialize the script
<script type="text/javascript">
$(document).ready(function() {
$(‘#teste’).dataTable( );
} );
</script>
Create Physical table in Html
<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>
Browser other questions tagged html css html-table
You are not signed in. Login or sign up in order to post.
You could take the edge off the
<input>and the cell padding, but it would still be weird. Why don’t you use a lib for that?– Gustavo Rodrigues
I don’t think it’s worth importing a lib to configure cells
td– CesarMiguel
It would be more organized, depending on what you do. If this is the only table in the application, then ok.
– Gustavo Rodrigues
Yes, in principle it will be the only one. In the other tables I am using Devexpress in the application, and I wanted to replicate the Gridviews as much as possible. The problem is that in Gridview you would have trouble having a field to attach files
– CesarMiguel