Je suis un nouveau venu de la programmation Web, alors je fais probablement une erreur évidente ici.
Quand j'essaie de cacher une ligne dans une table à partir de JavaScript comme des lignes [i] .style.display = 'None', la disposition de la table est complètement cassée. À l'origine, la teneur en cellule était enveloppée et la largeur de la table était réduite. J'ai ensuite ajouté style = "mise en page table: fixe" dans la balise de table et style = "espace blanc: Nowrap" dans chaque TD. Cela arrêta l'emballage de ligne, mais le contenu n'a toujours pas été aligné sur une ligne. Les cellules ont commencé à se déplacer à gauche en cas d'espace et de largeur de colonne variée d'une rangée à une autre. J'ai ensuite ajouté une largeur fixe à chacun de l'élément TH et TD et également à la DIV contenant la table. Toujours le problème est resté. P>
Mon HTML actuel est quelque chose comme ce qui suit. P>
<div style="width: 300px">
<table id="errorTable" width="100%" cellpadding="5" cellspacing="2" style="table-layout: fixed">
<tr id="HeaderRow">
<th style="width: 100px;">Header 1</th>
<th style="width: 50px;">Header 2</th>
<th style="width: 150px;">Header 3</th>
</tr>
<tr id="DetailRow1">
<td style="white-space:nowrap; width: 100px;">Data 1_1 in Row 1</td>
<td style="white-space:nowrap; width: 50px;">Data 1_2 in Row 1</td>
<td style="white-space:nowrap; width: 150px;">Data 1_3 in Row 1</td>
</tr>
<tr id="DetailRow2">
<td style="white-space:nowrap; width: 100px;">Data 2</td>
<td style="white-space:nowrap; width: 50px;">Data 2</td>
<td style="white-space:nowrap; width: 150px;">Data 2</td>
</tr>
<tr id="DetailRow3">
<td style="white-space:nowrap; width: 100px;">Data 3_1</td>
<td style="white-space:nowrap; width: 50px;">Data 3_2</td>
<td style="white-space:nowrap; width: 150px;">Data 3_3</td>
</tr>
</table>
</div>
5 Réponses :
corrige toujours la largeur de vos colonnes. Cela ferait-il votre problème? Idéalement, vous devez également joindre des sections d'en-tête et de carrosserie à l'aide de THEAD et Tody < Pré> xxx
Bonjour Robin, merci pour votre suggestion. J'ai déjà essayé de mettre la largeur fixe dans chaque élément TD, comme vous le verrez dans mon HTML. Après votre suggestion, j'ai ajouté le! Important, mais je ne vois pas de changement. Au lieu de valeurs absolues de pixels, j'ai également essayé de donner la largeur en% comme vous l'avez dit, mais cela n'a pas non plus de différence. Au fait, j'utilise Chrome.
Essayé d'ajouter et
Hmmm .. Je suis à l'abri des suppositions pour le moment. Upvot de cette question. J'espère que quelqu'un d'autre peut dire ce qui manque. J'ai le même problème. J'ai jeté une plage à l'intérieur de chaque table pour voir si je pouvais forcer la largeur et cela semble fonctionner. C'est moche cependant. J'ai eu le même problème: j'ai essayé de cacher une colonne par Le problème est le type d'affichage que vous utilisez pour rendre la rangée de table visible. p> J'espère que cela pourrait aider qui luttent avec le même problème.
Au lieu d'utiliser
C'est parfait pour moi.
0
votes
0 commentaires
2
votes
elem.style.display = "Aucun" mais lorsqu'il montre à nouveau la mise en page. Ce style d'affichage a fonctionné pour moi:
colonnes.Item (i) .style.display = "cellule de table";
0 commentaires
3
votes
Pour masquer une utilisation de la table Display = "Aucune" STROND>
Pour montrer une utilisation de la table afficheur = "rangée de table" forte>
J'ai fait un échantillon afin que vous puissiez voir ceci en action.
<table id="myTable" class="table table-striped table-hover">
<thead>
<tr>
<td>#</td>
<td>Letter</td>
</tr>
</thead>
<tbody>
<tr id="trA">
<td>1</td>
<td>A</td>
</tr>
<tr id="trB">
<td>2</td>
<td>B</td>
</tr>
<tr id="trC">
<td>3</td>
<td>C</td>
</tr>
</tbody>
</table>
<button id="showB" onclick="show()">show B</button>
<button id="hideB" onclick="hide()">hide B</button>
0 commentaires
4
votes
affichage: aucun; i utilisé visibilité: effondrement; pour les lignes cachées. Cela maintient toujours la largeur des colonnes et de l'ensemble de la mise en page.
1 commentaires