html - ligne du tableau comme un lien

Question

Je ne peux pas définir la ligne de mon tableau comme un lien vers quelque chose. Je ne peux utiliser que du css et du html. J'ai essayé différentes choses, de div dans la rangée à autre chose, mais je n'arrive toujours pas à le faire fonctionner.

Answer 1

Vous avez deux façons de le faire :

• Utilisation de javascript :

  <tr onclick="document.location = 'links.html';">

• Utilisation d'ancrages :

  <tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>

J'ai fait le second travail en utilisant :

table tr td a {
    display:block;
    height:100%;
    width:100%;
}

Pour supprimer l'espace mort entre les colonnes :

table tr td {
    padding-left: 0;
    padding-right: 0;
}

Voici une démonstration simple du deuxième exemple : DEMO

Answer 2

Je me suis fait une fonction jquery personnalisée :

Html

<tr data-href="site.com/whatever">

jQuery

$('tr[data-href]').on("click", function() {
    document.location = $(this).data('href');
});

Facile et parfait pour moi. J'espère que cela vous aidera.

(Je sais que le PO ne veut que du CSS et du HTML, mais pensez à jQuery).

Modifier

D'accord avec Matt Kantor qui utilise data attr. Réponse éditée ci-dessus

Answer 3

Si vous utilisez un navigateur qui le prend en charge, vous pouvez utiliser les feuilles de style en cascade (CSS) pour transformer l'adresse de l'utilisateur. <a> dans une ligne du tableau :

.table-row { display: table-row; }
.table-cell { display: table-cell; }

<div style="display: table;">
    <a href="..." class="table-row">
        <span class="table-cell">This is a TD... ish...</span>
    </a>
</div>

Bien sûr, vous êtes limité à ne pas mettre d'éléments de bloc à l'intérieur de la balise <a> . Vous ne pouvez pas non plus le mélanger avec un produit ordinaire. <table>

Answer 4

La méthode habituelle consiste à assigner du JavaScript à la fonction onClick de l'attribut TR élément.

Si vous ne pouvez pas utiliser JavaScript, alors vous devez utiliser une astuce :

1. Ajoutez le même lien à chaque TD de la même ligne (le lien doit être l'élément le plus extérieur de la cellule).

2. Transformez les liens en éléments de bloc : a { display: block; width: 100%; height: 100%; }

Cette dernière option forcera le lien à remplir toute la cellule, de sorte qu'en cliquant n'importe où, le lien sera invoqué.

Answer 5

Vous ne pouvez pas envelopper un <td> avec un élément <a> mais vous pouvez réaliser une fonctionnalité similaire en utilisant la balise onclick pour appeler une fonction. Voici un exemple ici quelque chose comme cette fonction :

<script type="text/javascript">
function DoNav(url)
{
   document.location.href = url;
}
</script>

Et ajoutez-le à votre table comme ceci :

<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>