Comment faire pour déborder du contenu spécifique à l'intérieur d'un <td>?

Je commence avec une cellule td comme celui-ciComment faire pour déborder du contenu spécifique à l'intérieur d'un <td>?

<td> 
<span>123</span> 
<input style="display:none;"> 
</td>

Je suis à la recherche d'un moyen de style cette façon que le contenu Orignal est caché, la boîte d'entrée est affichée et déborde au lieu de redimensionner la td, et la tenue le td dimensionné pour son contenu original.

Etat A, que j'ai maintenant, ressemble à ceci

[123] [45aaaaaaaaaaaaaaa6] [7aaaaaa89]

Je veux état B pour ressembler à ce

[* champ de saisie de texte * aaaaaaaaa6] [7aaaaaa89]

Source

2010-11-03 Matt

Tout d'abord, cela ressemble pas code valide du tout ... Voulez-vous cacher l'envergure avec css? Et montrer l'entrée? Et un débordement visible sur le td? –

Vous ne pouvez pas faire défiler jusqu'à TD, vous devez mettre votre contenu, zone de texte à l'intérieur de div et div à l'intérieur de TD. Vous pouvez styliser cette div pour avoir des barres de défilement au besoin. –

c'était pseudo code, ce qui je suppose n'était pas une bonne idée – Matt

figured it out. Ce que je ne savais pas qu'un élément est en position: absolute ne peut pas être supposé défaut à une position 0,0, donc je dois mettre la gauche à 0 explicitement

<td> 
<div style="position: relative;"> 
    <span style="visibility:hidden;">123</span> 
    <input style="position: absolute; left:0; display:inline;"> 
</div> 
</td>

Source

2010-11-03 10:29:06 Matt

affichage: aucun supprime totalement l'élément du flux, la visibilité: masqué cache l'élément mais occupera encore de l'espace dans le document. D'ailleurs, vos éléments et valeurs de style ne sont pas fermés correctement (utilisez ";" entre les attributs de style). –

<td> 
<span>123</span> 
<input style="display:none;"> 
</td>

est la correction de votre balisage, mais quel est l'effet que vous voulez atteindre et ce que vous avez exactement essayé jusqu'à présent?

Source

2010-11-03 09:44:24 Kyle

Et le champ de saisie devrait être dans un formulaire, bien que cette forme pourrait être là quelque part enroulée autour de la table. –

D'accord, pense que nous avons besoin de plus d'informations détaillées de l'OP. – Kyle

J'ai essayé "affichage: inline" qui a étiré le , je veux "affichage: ne pas changer la boîte juste aller sur le dessus des choses;" – Matt

<td> 
<span>123</span> 
<div id="hidden"> 
<input type="text" /> 
</div> 
</td>

dans le style définissent:

#hidden{ 
display:none; 
position:absolute; 
margin:.5em; 
}

script make qui montre la div sur plus (vous aurez besoin d'inclure jquery js ...)

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('table tr td').children().find('div').hover(function(){ 
     $(this).show(); 
    } 
    ) 
    }); 
</script>

Source

2010-11-03 09:57:11 Conex

Comment faire pour déborder du contenu spécifique à l'intérieur d'un <td>?

Répondre

Questions connexes