Ligne longue en HTML Tableau entachant la disposition des autres lignes

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?

Answer 1

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;
}

Answer 2

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>

Answer 3

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.