1
I was setting up a table with scroll
and I came across the following bug in css:
If I press f5
2 times the table ends up fixing and stays like this:
When I clear the cache(ctrl + f5
) the error comes back...
My javascript that mounts this table with the function:
var alunos = [{"id":"1","nome":"U"},{"id":"2","nome":"Q"},.....];
var trAlunoTemplate = '<tr> <td>[@id]</td> <td>[@nome]</td>...</tr>';
function createTable(quantidade, ordem) {
var table = "";
alunos = sort(alunos, ordem);
for (var i = 0; i < quantidade; i++) {
var tr = trAlunoTemplate;
tr = tr.replace("[@nome]", alunos[i].nome);
tr = tr.replace("[@id]", alunos[i].id);
table += tr;
}
jQuery("table tbody").html(table);
}
createTable(jQuery("#quantView").val(), "nome");
My css:
#quantView {
text-align: center;
height: 12px;
}
.tabela-out {
overflow-x: scroll;
width: 100%;
height: 100%;
}
thead tr {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#939393+0,aaaaaa+48,d3d3d3+100&1+0,0.66+36,1+100 */
background: -moz-linear-gradient(45deg, rgba(147,147,147,1) 0%, rgba(164,164,164,0.66) 36%, rgba(170,170,170,0.72) 48%, rgba(211,211,211,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(147,147,147,1) 0%,rgba(164,164,164,0.66) 36%,rgba(170,170,170,0.72) 48%,rgba(211,211,211,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(147,147,147,1) 0%,rgba(164,164,164,0.66) 36%,rgba(170,170,170,0.72) 48%,rgba(211,211,211,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#939393', endColorstr='#d3d3d3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
tr, td {
border: gray solid 1px;
padding: 0% 1%;
}
Where in the HTML you are calling this Javascript?
– dsantoro
at the end of everything
– Luiz Carlos Coelho
You can place the code in Jsfiddle, Jsbin, or Codepen?
– Douglas Garrido
Ta including CSS before loading table?
– mau humor
Try it this way:
jQuery( document ).ready(function() {
/* aqui vai seu código */
});
– mau humor
Douglas: https://jsfiddle.net/xwfpyje4/10/ In jsfiddle when I redeem the place of the result la it fixes, in my localhost only fixes when it is in cache
– Luiz Carlos Coelho
Bad mood: I tried to put before, after and even in the middle and also tried the ready...
– Luiz Carlos Coelho