Bugado design! (but with cache works, "unlock")

Asked

Viewed 140 times

1

I was setting up a table with scroll and I came across the following bug in css:

bug

If I press f5 2 times the table ends up fixing and stays like this: inserir a descrição da imagem aqui

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?

  • at the end of everything

  • 1

    You can place the code in Jsfiddle, Jsbin, or Codepen?

  • Ta including CSS before loading table?

  • Try it this way: jQuery( document ).ready(function() {&#xA;/* aqui vai seu código */&#xA;});

  • 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

  • Bad mood: I tried to put before, after and even in the middle and also tried the ready...

Show 2 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.