Pin column of an HTML table

Question

Pin column of an HTML table

Navigation

#1 by (-1 votes)
#2 by (-1 votes)

1

I have a pretty long table and for better user experience, I want to put the first column, which will display images, such as fixed, type in excel, freeze the panel so the visualization gets better on the mobile.

I'm using Bootstrap in the build of the table and I've looked here in the forum for alternatives to my case, and I used as a base the following fiddle > that's exactly how I want it to stay.

But I could not adapt to my, the images are floating and are not framed in the table cell, could you help me?

Follow my fiddle: link

html css twitter-bootstrap

asked by anonymous 26.04.2017 / 14:40

2 answers

Date format javascript Download PDF Files in ReactJs

score -1 · Answer 1

-1

Place your images inside an image tag.

<img class='exmp'>

No css

.exmp{
   width: 100%;
}

26.04.2017 / 14:50

score -1 · Answer 2

The easiest way to freeze the first column of the table using Bootstrap is to add datatables to your page and start your table with fixedColumn = true .

var source = document.getElementById("tmplPessoa").innerHTML;
var template = Handlebars.compile(source);
var tabela = document.querySelector("#pessoas tbody");

for (var i = 0; i < 30; i++) {
  faker.locale = "pt_BR";
  var nome = {};
  nome.Primeiro = faker.name.firstName();
  nome.Ultimo = faker.name.lastName();
  var nascimento = faker.date.past(50, new Date(1992, 08, 20));
  
  var pessoa = {};
  pessoa.Avatar = faker.internet.avatar();
  pessoa.Nascimento = nascimento.toLocaleDateString();
  pessoa.Nome = faker.name.findName(nome.Primeiro, nome.Ultimo);
  pessoa.Endereco = faker.address.streetAddress();
  pessoa.Cidade = faker.address.city();
  pessoa.Estado = faker.address.stateAbbr();
  pessoa.CEP = faker.address.zipCode();
  pessoa.Pais = faker.locales[faker.locale].address.default_country;
  pessoa.Telefone = faker.phone.phoneNumber();
  pessoa.Email = faker.internet.email(nome.Primeiro, nome.Ultimo);
  
  var html = template(pessoa);
  var wrapper = document.createElement("table");
  wrapper.innerHTML = html;
  tabela.appendChild(wrapper.rows[0]);
}

$('#pessoas').DataTable({
    fixedColumns: true
});

th, td { white-space: nowrap; }
div.pessoas_wrapper {
  width: 800px;
  margin: 0 auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/scroller/1.4.2/css/scroller.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/locales/pt_BR/faker.pt_BR.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script><scriptsrc="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script><scriptsrc="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>
<script src="https://cdn.datatables.net/scroller/1.4.2/js/dataTables.scroller.min.js"></script><tableid="pessoas" class="table table-striped table-hover table-responsive nowrap">
  <thead>
    <tr>
      <th>Avatar</th>
      <th>Nascimento</th>
      <th>Nome</th>
      <th>Endereco</th>
      <th>Cidade</th>
      <th>Estado</th>
      <th>CEP</th>
      <th>Pais</th>
      <th>Telefone</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
  
  </tbody>
</table>

<script id="tmplPessoa" type="text/x-handlebars-template">
  <tr>
    <td><img src="{{Avatar}}" /></td>
    <td>{{Nascimento}}</td>
    <td>{{Nome}}</td>
    <td>{{Endereco}}</td>
    <td>{{Cidade}}</td>
    <td>{{Estado}}</td>
    <td>{{CEP}}</td>
    <td>{{Pais}}</td>
    <td>{{Telefone}}</td>
    <td>{{Email}}</td>
  </tr>
</script>