YUI Datatable Ancho

Question

Esto puede parecer una pregunta básica, pero estoy teniendo problemas para averiguar cómo ajustar el ancho de la tabla al 100% en una tabla de datos YUI.

He intentado hacer

#dtContainer { 
    width: 100%; 
} 

#dtContainer table { 
    width: 100% 
} 

pero ninguno de estos enfoques de trabajo.

Para aclarar, que estoy tratando de establecer el ancho de tabla de datos al 100% cuando la tabla está vacía y se muestra el mensaje vacío.

La tabla generada es una tabla HTML; entonces, pensé que esto debería funcionar

Answer 1

Resulta que la solución es muy simple:

.yui-dt table 
{ 
    width: 100%; 
} 

Answer 2

esta es una solución feo. pero funciona

<script> 
window.onload = function() { 
setTimeout('document.getElementById("NAME OF CONTAINER DIV").childNodes[1].style.width 
= "100%"',1000); 
}; 
</script> 

el problema es aplicar el estilo pre render no tiene sentido, el Javascript es la construcción de la tabla, después se hacen todo lo que podía llegar a trabajar.

Answer 3

se parece a esto etiqueta de estilo poco hace magia:

.yui-dt table { width:100%;} 

Answer 4

no uso .yui-dt tabla {width: 100%;} , No parece establecer los anchos de columna correctamente. Use myDataTable.setAttributes ({width: "100%"}, verdadero); después de mesa rinden

Answer 5

Para mantener la relación de aspecto a través de varias pantallas con diferentes resoluciones, tenía que ajustar manualmente el ancho de la columna como porcentajes que se suman para 100%.

<style type="text/css"> 

    /* YUI Individual Column Width */   
    #dvAutoWidthList .yui-dt-col-Col1{width: 35%;} 
    #dvAutoWidthList .yui-dt-col-Col2{width: 10%;} 
    #dvAutoWidthList .yui-dt-col-Col3{width: 15%;} 
    #dvAutoWidthList .yui-dt-col-Col4, .yui-dt-col-Col5, .yui-dt-col-Col6, .yui-dt-col-Col7 {width: 10%;} 

</style> 

PD: Puede que no sea la mejor manera de hacerlo, pero ¡resolvió mi problema!

Kwex.

Answer 6

var dataTable = new Y.DataTable(
      { 
      columns: cols, 
      data: remoteData, 
      width: '100%',    
      } 
     ).render('#dataTable '); 

Esto debería hacer el truco. Trabajó para mí AUI 2.5.1