Click-Handler für Tabellenspalte (außer thead/tfoot)

[Rolf B]

Hallo Andreas,

wie Jürgen schrieb: der bedienbare Weg ist ein button-Element für diese Zellen, das Du per CSS unsichtbar machst. Damit kannst Du automatisch durch die Tabelle tabben und wahlweise ENTER, Mausklick oder Touch-Tab zur Auswahl verwenden.

Alle 3 Auslöser behandelst Du mit einem click-Handler auf der Tabelle. Wenn der Button HTML enthalten kann, ist event.target ggf. ein Kindelement des Buttons, den Button müsstest Du dann mit event.target.closest("button") herausfinden.

Ich habe jetzt eine Weile gesucht und gebastelt, wegen des unten beschriebenen Höhenproblems. Ansonsten hätte ich Jürgens Antwort unkommentiert gelassen.

<td>
  <button type="button">
    inhalt
  </button>
</td>

   tr {
      height: 1px;       /* siehe Erklärung unten */
   }
   td:has(button) {
      padding: 0;        /* Kein Padding auf Zellen mit Button */
      height: inherit;   /* siehe Erklärung unten */
   }
   td button {
      display: block;
      padding: /* Hier das Padding, das die Zelle sonst hätte */
      width: 100%; 
      height: 100%;
      font: inherit;     /* Browser-Styles geben Buttons eigenen Font! */
      border: none;
      background: transparent;
   }

Wenn Du noch andere Buttons hast, musst Du deinem Datenübernahmebutton noch eine Klasse stiften. Oder mit nth-child die richtige Tabellenspalte auswählen - sofern möglich.

Die Height-Akrobatik mit 1px in tr und inherit in td hat den simplen Grund, dass andernfalls Tabellenzellen nicht die volle Höhe der Row haben. Dies ist der einzige Workaround, den ich gefunden habe, um das Problem mit reinem CSS zu lösen (keine Ahnung ob unser Wiki oder einer von Gunnars Noti.st Vorträgen was dazu weiß). Ohne diesen Workaround kann es passieren, dass Du eine Zelle mit 5 Zeilen hast und deine Button-Zelle mit bspw. 3 Zeilen, und der Button füllt dann nicht die komplette Zelle.

Zum Beweis gib dem Button eine Hintergrundfarbe und lass die Height-Akrobatik weg. Eine bessere Lösung (ohne JS) würde mich interessieren.

Rolf