Wie macht man eine ganze Zeile in einer Tabelle als Link anklickbar?

Question

Ich benutze Bootstrap und das Folgende funktioniert nicht:

            Blah Blah
            1234567
            £158,000

Answer 1

Ich weiß, dass jemand bereits so ziemlich dasselbe geschrieben hat, aber mein Weg ist der richtige Weg (div kann nicht das Kind von A sein) und es ist auch besser, Klassen zu verwenden.

Sie können eine Tabelle mit CSS nachahmen und ein A-Element zur Zeile machen.

      Zelle 1

      Zelle 2

css:

.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}

Answer 2

Hier ist ein Artikel, der erklärt, wie man dies im Jahr 2020 angehen kann: https://www.robertcooper.me/table-row-links

Der Artikel erklärt 3 mögliche Lösungen:

1. Mit JavaScript.
2. Das Einwickeln aller Tabellenzellen mit Ankerlementen.

3. Das Verwenden von

   Elementen anstelle von nativen HTML-Tabellelementen, um Tabellenzeilen als Elemente zu haben.

Der Artikel geht ausführlich darauf ein, wie man jede Lösung implementiert (mit Links zu CodePens) und berücksichtigt auch Randfälle, wie man eine Situation angeht, in der man Links in Tabellenzellen hinzufügen möchte (da verschachtelte Elemente kein gültiges HTML sind, muss man das umgehen).

Wie @gameliela erwähnt hat, könnte es auch sinnvoll sein, einen Ansatz zu finden, bei dem nicht die gesamte Zeile zu einem Link gemacht wird, da dies viele Dinge vereinfachen wird. Ich persönlich denke jedoch, dass es für Benutzer eine gute Erfahrung sein kann, eine gesamte Tabellenzeile als Link klickbar zu machen, da es für den Benutzer praktisch ist, überall in einer Tabelle klicken zu können, um zur entsprechenden Seite zu navigieren.

Answer 3

Ich würde es vorziehen, das onclick=""-Attribut zu verwenden, da es für Anfänger leicht zu verwenden und zu verstehen ist

    Benutzername
    E-Mail
    Adresse

Answer 4

Eine weitere Option ist die Verwendung eines , CSS-Positionen und etwas jQuery oder JS:

HTML:

        1

    2

CSS:

table tr td:first-child {
    position: relative;
}
a.rowLink {
    position: absolute;
    top: 0; left: 0;
    height: 30px;
}
a.rowLink:hover {
    background-color: #0679a6;
    opacity: 0.1;
} 

Dann musst du dem eine Breite geben, zum Beispiel mit jQuery:

$(function () { var $table = $('table'); $links = $table.find('a.rowLink');

        $(window).resize(function () {
            $links.width($table.width());
        });

        $(window).trigger('resize');
    });

Answer 5

Ich habe viel Zeit damit verbracht, dieses Problem zu lösen.

Es gibt 3 Ansätze:

1. Verwenden von JavaScript. Die klaren Nachteile: Es ist nicht möglich, nativ einen neuen Tab zu öffnen, und beim Überfahren der Zeile wird es keine Anzeige in der Statusleiste wie bei regulären Links geben. Auch die Zugänglichkeit ist fraglich.

2. Verwenden von nur HTML/CSS. Dies bedeutet, dass verschachtelt unter jedem platziert werden muss. Ein einfacher Ansatz wie dieses Beispiel funktioniert nicht - da die klickbare Fläche nicht zwangsläufig für jede Spalte gleich ist. Dies ist ein ernstzunehmendes UX-Anliegen. Außerdem ist es nicht gültiges HTML, einen unter dem Tag zu verschachteln (obwohl Browser damit einverstanden sind).

   Ich habe 3 andere Möglichkeiten gefunden, diesen Ansatz zu implementieren. Die erste ist ok, die anderen beiden sind nicht großartig.

   a) Schauen Sie sich dieses Beispiel an:

   tr {
     height: 0;
   }
   
   td {
     height: 0;
     padding: 0;
   }
   
   /* Ein Hack, um Unterschiede zwischen Chrome und Firefox zu überwinden */
   @-moz-document url-prefix() {
     td {
       height: 100%;
     }
   }
   
   a {
     display: block;
     height: 100%;
   }

   Es funktioniert, erfordert jedoch aufgrund von Inkonsistenzen zwischen Chrome und Firefox einen browser-spezifischen Hack, um die Unterschiede zu überwinden. Außerdem wird Chrome immer den Zelleninhalt nach oben ausrichten, was bei langen Texten Probleme verursachen kann, insbesondere wenn unterschiedliche Zeilenhöhen involviert sind.

   b) auf { display: contents; } setzen. Dies führt zu 2 weiteren Problemen:

   b1. Wenn jemand anderes direkt den Tag stylen möchte, z.B. indem er ihn auf { width: 20px; } setzt, müssen wir diese Formatierung irgendwie an den Tag weitergeben. Dafür brauchen wir wahrscheinlich mehr Magie als im Javascript-Alternativansatz.

   b2. { display: contents; } ist immer noch experimentell; speziell wird es von Edge nicht unterstützt.

   c) auf { height: --some-fixed-value; } setzen. Dies ist einfach nicht flexibel genug.

3. Der letzte Ansatz, den ich ernsthaft in Betracht ziehe, ist es, überhaupt keine klickbaren Zeilen zu verwenden. Klickbare Zeilen sind keine großartige UX-Erfahrung: Es ist nicht einfach, sie visuell als klickbar zu kennzeichnen, und es entstehen Herausforderungen, wenn innerhalb der Zeilen mehrere Teile klickbar sind, wie z.B. Schaltflächen. Eine machbare Alternative könnte sein, nur einen Tag in der ersten Spalte anzuzeigen, der als normaler Link angezeigt wird und die Funktion hat, die ganze Zeile zu navigieren.