YUI Datatable Width

Question

Może to wydawać się podstawowym pytaniem, ale mam problem z ustaleniem szerokości tabeli na 100% na datowalnym YUI.

Próbowałem robić

#dtContainer { 
    width: 100%; 
} 

#dtContainer table { 
    width: 100% 
} 

ale żadna z tych metod pracy.

Aby wyjaśnić, próbuję ustawić szerokość datatable do 100%, gdy tabela jest pusta i wyświetlany jest pusty komunikat.

Wygenerowana tabela jest tabelą HTML; więc myślałem, że to powinno działać.

Answer 1

Okazuje się, że rozwiązanie jest bardzo proste:

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

Answer 2

To jest brzydkie rozwiązanie. ale działa

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

problem jest zastosowanie stylu wstępnego renderowania nie ma sensu, javascript buduje tabelę, po czyni się wszystko, co mogłem dostać się do pracy.

Answer 3

wygląda to trochę tag styl działa magiczne:

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

Answer 4

nie używaj .yui-dt tabeli {width: 100%;} , Wydaje się nie ustawiać poprawnie szerokości kolumn. Użyj myDataTable.setAttributes ({width: "100%"}, true); po renderowaniu tabeli:

Answer 5

Aby zachować proporcje ekranu na różnych ekranach o różnych rozdzielczościach, musiałem ręcznie ustawić szerokość kolumny jako procent zsumowany do 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> 

PS: Może nie być najlepszym sposobem, aby to zrobić, ale rozwiązał mój problem!

Kwex.

Answer 6

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

To powinno wystarczyć. Pracowałem dla mnie AUI 2.5.1