74 votes

Brian Fisher avatar

Faire en sorte que le lien dans la cellule du tableau remplisse toute la hauteur de la ligne

Demandé el 19 de Octobre, 2010
Quand la question a-t-elle été
32162 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

J'ai un tableau de données et chaque cellule est un lien. Je veux permettre à l'utilisateur de cliquer n'importe où dans la cellule du tableau et les suivez le lien. Parfois, les cellules du tableau sont plus d'une ligne, mais pas toujours. J'utilise td a {display: block} pour obtenir le lien pour couvrir la plupart de la cellule. Quand il y a une cellule dans une ligne deux lignes et les autres sont sur une seule ligne, l'un des paquebots de ne pas remplir la totalité de l'espace vertical de la ligne de la table. Voici un exemple de code HTML et vous pouvez le voir en action ici http://www.jsfiddle.net/RXHuE/:

<head>
<style type="text/css">
  td {width: 200px}
  td a {display: block; height:100%; width:100%;}
  td a:hover {background-color: yellow;}
</style>
<title></title>
</head>
<body>
<table>
  <tbody>
    <tr>
      <td>
        <a href="http://www.google.com/">Cell 1<br>
        second line</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 2</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 3</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 4</a>
      </td>
    </tr>
  </tbody>
</table>
</body>
Demandé el 19 de Octobre, 2010 par Brian Fisher

Réponses

Trop de publicités?

111voto

zobier avatar
zobier Points 521

Définissez une marge négative arbitrairement élevée et un remplissage égal sur l'élément de bloc et le débordement masqué sur le parent. 

 td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}

http://jsfiddle.net/RXHuE/213/

Répondu el 4 de Avril, 2013 par zobier (521 Points )

47voto

Gaurav Saxena avatar
Gaurav Saxena Points 2029

Vous avez besoin d'un petit changement dans votre CSS. Rendant td height:100%; fonctionne pour IE 8 et FF 3.6, mais il ne fonctionne pas pour Chrome. 

td {
  width: 200px;
  border: solid 1px green;
  height: 100%
}
td a {
  display: block;
  height:100%;
  width:100%;
}

Mais faire de l' height de 50px fonctionne pour Chrome en plus de IE et FF

td {
  width: 200px;
  border: solid 1px green;
  height: 50px
}
td a {
  display: block;
  height:100%;
  width:100%;
}

Edit:

Vous avez donné la solution vous-même dans un autre post ici; ce qui est d'utiliser display: inline-block;. Cela fonctionne lorsqu'il est combiné avec ma solution pour Chrome, FF3.6, IE8

td {
  width: 200px;
  border: solid 1px green;
  height: 100%}
td a {
  display: inline-block;
  height:100%;
  width:100%;
}

Mise à jour

Le code suivant fonctionne pour moi dans IE8, FF3.6 et chrome.

CSS

td {
  width: 200px;
  border: solid 1px green;
  height: 100%;
}
td a {
  display: inline-block;
  height:100%;
  width:100%;
}
td a:hover {
  background-color: yellow;
}

HTML

<table>
  <tbody>
    <tr>
      <td>
        <a href="http://www.google.com/">Cell 1<br>
        second line</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 2</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 3</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 4</a>
      </td>
    </tr>
  </tbody>
</table>

L'exemple pond ici

Répondu el 19 de Octobre, 2010 par Gaurav Saxena (2029 Points )

4voto

vaichidrewar avatar
vaichidrewar Points 2154

Suivre les travaux de piratage [Testé sur Chrome / Firefox / Safari] Avoir le même remplissage pour les éléments td et anchor. Et pour l'ancre aussi avoir une marge qui est égale à -ve de la valeur de remplissage.

HTML 

 <table>
    <tr>
        <td><a>Hello</a></td>
    </tr>
</table>

CSS: 

 td {                          
    background-color: yellow;                                                                              
    padding: 10px;                                                                                                            
}  
a {
    cursor:pointer;
    display:block;
    padding: 10px;
    margin: -10px;
}

Violon de travail: http://jsfiddle.net/JasYz/

Répondu el 11 de Avril, 2013 par vaichidrewar (2154 Points )

1voto

Aaron Digulla avatar
Aaron Digulla Points 143830

Essayez display: block:

td a {display: block; height:100%;}

[EDIT] WTF ... je peux confirmer cela ne fonctionne pas dans FF 4 et Chrome. Ceci fonctionne:

td a {display: block;  height: 2.5em; border: 1px solid red;}

Qui suggère que l' height:100%; n'est pas définie dans une cellule de tableau. Peut-être que c'est parce que la cellule reçoit ses de la taille du contenu (de sorte que le contenu ne peut pas dire "dites-moi votre taille" parce que cela conduirait à une boucle). Il ne fonctionne pas même si vous définissez une hauteur pour les cellules de la sorte:

td {width: 200px; height: 3em; padding: 0px}

De nouveau le code ci-dessus échoue. Donc, ma suggestion est d'utiliser une hauteur définie pour les liens (vous pouvez omettre la largeur; c'est-à 100% par défaut pour les éléments de bloc).

[EDIT2] j'ai cliqué à travers une centaine d'exemples à http://www.cssplay.co.uk/menus/ mais aucun d'entre eux mix seule ligne et multi-ligne de cellules. Semble que vous avez touché un point aveugle.

Répondu el 19 de Octobre, 2010 par Aaron Digulla (143830 Points )

1voto

Tim Büthe avatar
Tim Büthe Points 21527

Je vais poster la même réponse ici, comme je l'ai fait sur ma propre question.

Inspiré par Jannis M's réponse, j'ai fait la suivante:

$(document).ready(function(){    
    $('table tr').each(function(){
        var $row = $(this);
        var height = $row.height();
        $row.find('a').css('height', height).append('&nbsp;');  
    });       
});

J'ai ajouté un &nbsp; depuis les liens vides (ne contenant pas de nœuds de texte) ne peut pas être de style(?).

Voir mon jour de violon.

Répondu el 6 de Février, 2012 par Tim Büthe (21527 Points )

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X