Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

246
Visualizações
columnas de tablas de datos redimensionables [jquery]

Quiero cambiar manualmente el tamaño de una columna de columna de tabla.

busque en Stack Overflow y probé

Cómo hacer que las columnas de datatables.js sean redimensionables con jQuery UI y jQuery UI Resize with table and colspans

y ejemplo de google, documentación oficial.

https://github.com/dobtco/jquery-resizable-columns & http://jsfiddle.net/Twisty/ah67jopf/3/

mi código de ejemplo

 <table id="examTbl" class="table table-bordered table-hover table-sm dataTable dtr-inline" data-resizable="true"> <thead> <tr> <th><input type="checkbox" id="chkbox"></th> <th>1</th> <th>2</th> </tr> </thead> </table> <style> table, td, th { /*table-layout:fixed;*/ overflow:hidden; white-space: nowrap; text-overflow: ellipsis; } </style>

Configuración de tablas de datos

 var table_option = { processing: true, serverSide: true, searching: false, responsive: true, dom: "lfBtip", ajax: { url: '/get/textVal' }, columns: [{ data: 'null', defaultContent: "<input type='checkbox' class='chkbox'>", }, { data: 'test1' }, { data: 'test2' }, ], autoWidth: false, drawCallback: function(settings) { $('table th').resizable({ handles: 'e', minWidth: 18, stop: function(e, ui) { $(this).width(ui.size.width); } }); } }
about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

Creo que puede agregar la propiedad css "cambiar el tamaño" en sus estilos.

 <table id="examTbl" class="table table-bordered table-hover table-sm dataTable dtr-inline" data-resizable="true"> <thead> <tr> <th><input type="checkbox" id="chkbox"></th> <th>1</th> <th>2</th> </tr> </thead> </table> <style> table, td, th { /*table-layout:fixed;*/ overflow:hidden; white-space: nowrap; text-overflow: ellipsis; resize:horizontal; }

about 4 years ago · Juan Pablo Isaza Relatório

0

Editar: intente agregar "autoWidth: false" en la configuración de su tabla de datos:

 var table_option = { processing: true, serverSide: true, searching: false, autoWidth: false, responsive: true, dom: "lfBtip", ajax: { url: '/get/textVal' }, columns: [{ data: 'null', defaultContent: "<input type='checkbox' class='chkbox'>", }, { data: 'test1' }, { data: 'test2' }, ], autoWidth: false, drawCallback: function(settings) { $('table th').resizable({ handles: 'e', minWidth: 18, stop: function(e, ui) { $(this).width(ui.size.width); } }); } }

Resuelto en este violín: http://jsfiddle.net/Twisty/ah67jopf/3/

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda