datatable - Ancho de tabla de datos YUI

html-table width

Question

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

Intenté hacer

#dtContainer {
width: 100%;
}
#dtContainer table {
width: 100%
}

pero ninguno de estos enfoques funciona.

Para aclarar, intento establecer el ancho de la tabla de datos en 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

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

Answer 2

Para mantener la relación de aspecto en varias pantallas con diferentes resoluciones, tuve que configurar manualmente el ancho de la columna como porcentajes que se suman al 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 3

Resulta que la solución es realmente simple:

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

Answer 4

esta es una solución fea 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, la representación previa no tiene sentido, el javascript está construyendo la tabla, el renderizado de publicaciones es todo lo que pude hacer para trabajar.

Answer 5

parece que esta pequeña etiqueta de estilo funciona magia:

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

Answer 6

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

Esto debería funcionar. Trabajó para mí AUI 2.5.1