2010-06-09 4 views
2

J'utilise Tomahawk 1.1.8 et j'essaye de construire/rendre un dataTable même s'il est vide. (Rendu = "true" comme exigence)Vide t: dataTable peut rendre un HTML non valide?

Considérant que notre Bean fournit une liste vide (aucune ligne à afficher par t: dataTable). Pourquoi t de Tomahawk: dataTable rendu juste après HTML « invalide », même si nous avons un en-tête fournissant plus d'une colonne:

<tbody><tr><td></td></tr></tbody> 

Le code JSF pour le T: dataTable est comme d'habitude:

<t:dataTable value="#{bean.list}" var="dataItem"> 
    <h:column> 
    <f:facet name="header"> 
     <h:outputText value="A"/> 
    </f:facet> 
    <h:outputText value="#{dataItem.a}" /> 
    </h:column> 
    <h:column> 
    <f:facet name="header"> 
     <h:outputText value="B"/> 
    </f:facet> 
    <h:outputText value="#{dataItem.b}" /> 
    </h:column> 
    <h:column> 
    <f:facet name="header"> 
     <h:outputText value="C"/> 
    </f:facet> 
    <h:outputText value="#{dataItem.c}" /> 
    </h:column> 
</t:dataTable> 

en revanche, JSF h: dataTable rend « mieux » en tout en omettant la balise complète tr (= même si je ne sais pas si cela pourrait être HTML « invalide », aussi):

<tbody></tbody> 

Mon problème avec ceci est l'absence des bordures de la table intérieure/règles lorsque css "border-collapse: collapse;" c'est actif.

J'ai préparé deux exemples HTML. Un décrivant le fait réel et l'autre solution possible comment peut-Tomahawk pourrait corriger:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
     "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>less td than th in one row</title> 

<style type="text/css" media="screen"> 
table { 
    border-collapse: collapse; 
} 

th, td { 
    border:1px solid #716F70; 
} 
</style> 
</head> 
<body> 
less td than th in one row: borders in FF3.x e.g. are rendered just for two table body cells: 
<br /> 
<table border="1"> 
    <tr> 
    <th>1</th> 
    <th>2</th> 
    <th>3</th> 
    <th>4</th> 
    <th>5</th> 
    <th>6</th> 

    </tr> 
    <tr> 
    <td>cell1</td> 
    <td>cell2</td> 
    <td>cell3</td> 
    <td>cell4</td> 
    <td>cell5</td> 

    <td>cell6</td> 
    </tr> 
    <tr> 
    <td>cell1</td> 
    <td/> 
    </tr> 
</table> 
</body> 
</html> 

... maintenant comment il serait mieux avec colspan:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
     "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>less td than th in one row: border with colspan ok</title> 

<style type="text/css" media="screen"> 
table { 
    border-collapse: collapse; 
} 

th, td { 
    border:1px solid #716F70; 
} 
</style> 
</head> 
<body> 
less td than th in one row: border (top) rendered for complete row, because of &lt;td colspan="5"/&gt; in cell 2 of row 2: 
<br /> 
<table border="1"> 
    <tr> 
    <th>1</th> 
    <th>2</th> 
    <th>3</th> 
    <th>4</th> 
    <th>5</th> 
    <th>6</th> 
    </tr> 
    <tr> 
    <td>cell1</td> 
    <td>cell2</td> 
    <td>cell3</td> 
    <td>cell4</td> 
    <td>cell5</td> 
    <td>cell6</td> 
    </tr> 
    <tr> 
    <td>cell1</td> 
    <td colspan="5"/> 
    </tr> 
</table> 
</body> 
</html> 

A colspan sur toutes les cellules de une rangée pourrait être la meilleure, je pense.

Certains navigateurs comme IE ou Opera ne dérange pas, mais Firefox le fait et je peux prendre ce point, aussi.

Existe-t-il des solutions de contournement ou des modèles pour obtenir le meilleur résultat possible? Je demande, parce que je pourrais manquer une technique.

Merci

+0

avez-vous fait un bogue pour cela? –

Répondre

3

Je sais que c'est une vieille question, mais je rencontré un problème similaire et l'approche que j'utilisés pour résoudre c'était en vérifiant si les données existent en utilisant empty de la manière suivante.

bodyStyleClass = "#{empty bean.list ? 'hidden' : ''}" 

La classe CSS « ​​cachée » obtient alors appliquée au corps de la table, de sorte que vous vous retrouvez avec les en-têtes de colonne seulement la table et le problème d'affichage va. Votre CSS devrait ressembler à ceci:

.hidden { 
    display: none; 
} 

Espérons que cela aidera quiconque dans le futur. This La question de débordement de pile peut aussi vous être utile, ainsi que la référence sur http://myfaces.apache.org/tomahawk-project/tomahawk/tagdoc/t_dataTable.html si vous souhaitez faire autre chose que d'appliquer une classe au niveau du corps de votre table.