Fix column of an HTML table

Question

I have a considerably long table and for better user experience, I want to put the first column, which will present images, as fixed, type in excel, freeze the panel so that the view is better in mobile.

I am using Bootstrap in the table construction and I searched here in the forum for possible alternatives to my case, and I used as a basis the following fiddle which is exactly how I want it to look.

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

Follow my fiddle: https://jsbin.com/wubeguhodi/1/edit?html,css,output

Answer 1

The easiest way for you to freeze the first column of the table using Bootstrap, is to add the 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>
<script src="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>
<script src="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>
<script src="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>
<script src="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>

<table id="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>

Answer 2

Place your images inside an image tag.

<img class='exmp'>

In css

.exmp{
   width: 100%;
}