Ligne longue en HTML Tableau entachant la disposition des autres lignes
-
13-09-2019 - |
Question
J'ai une table html servant mise en page pour une page (mauvaise pratique, je sais). Ce tableau ressemble à ceci:
Label1 Value1
Label2 Value2
Label3 Value3
Label4 Value4a Value4b Value4c Value4d
Je viens d'ajouter un message d'erreur de validation qui peut être assez grand pour une ligne, il est donc maintenant:
Label1 Value1 ErrorMessage
Label2 Value2
Label3 Value3
Label4 Value4a Value4b Value4c Value4d
Pour faire le travail de conception que j'ai ajouté un colspan à la cellule qui a le message de validation, de sorte qu'il couvre toute la table. Il fonctionne avec des messages d'erreur de longueur assez petit pour ne pas déborder la table. Autre que je reçois:
Label1 Value1 Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long ErrorMessage
Label2 Value2
Label3 Value3
Label4 Value4a Value4b Value4c Value4d
La ligne 4 est complètement foiré. Y at-il un moyen de spécifier que le contenu de la cellule de message d'erreur devrait déborder la table, au lieu d'élargir l'espace pour d'autres cellules dans les mêmes colonnes? Peut-être un peu de magie CSS?
La solution
Pour le texte étendre à l'extérieur de la table, l'élément de texte soit doit être à un niveau supérieur (hiérarchiquement) que la table, ou il doit être positionné sans rapport à la table.
Vous pouvez accomplir la suite en faisant quelque chose comme:
Label1 Value1 <span class="outside">Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long ErrorMessage</span>
Label2 Value2
Label3 Value3
Label4 Value4a Value4b Value4c Value4d
Et puis donner la classe à l'extérieur:
.outside
{
position:absolute;
}
Vous devrez faire un peu plus loin pour obtenir la mise en forme pour apparaître dans l'emplacement de correction.
EDIT:
Il suffit de réaliser la mise en forme nettoie un peu si vous utilisez l'idée de Jose aussi bien et la durée au lieu de div.
table
{
table-layout:fixed;
width:100em;
}
Autres conseils
Ok, voici la solution que j'ai tester et fonctionne dans Firefox 3:
<style type="text/css">
#error {
width: inherit;
overflow: auto;
padding: 0;
margin: 0;
}
</style>
<table width="400">
<tr>
<td width="100">A</td>
<td colspan="3" width="300">
<div id="error">Really long line...</div>
</td>
</tr>
<tr>
<td>1A</td>
<td>1B</td>
<td>1C</td>
<td>1D</td>
</tr>
<tr>
<td>2A</td>
<td>2B</td>
<td>2C</td>
<td>2D</td>
</tr>
</table>
Ceci est très hackish mais peut travailler pour votre situation. Si possible offre des largeurs statiques pour chacun de vous cellules de contenu. Ensuite, ajoutez une cellule supplémentaire sans une largeur. La dernière cellule devrait alors développer en laissant les autres à leur largeur de jeu.
Edit: D'après votre commentaire Vous pouvez également essayer de donner le message d'erreur une plus z-index css. Vous devrez également définir les messages Position pour faire ce travail.