Tabellenfeld zum anklicken

[werny]

Hallo,

ich habe eine Tabellenzeile mit meinen social Links erstellt.
Das jeweilige Icon ist jetzt anklickbar.
Habe aber gemerkt, dass der Link im Icon nicht gut sichtbar ist.
Also möchte ich, dass die ganze Zelle ein anklickbarer link sein sollte.
Wie kann ich das umstellen? Kann ich den Link in den jeweilgen ".tg-facebook" in der stlye Section hinterlegen?
Wer kann mir da helfen?

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;margin-bottom:-20px;margin-top:-1px;}
.tg  td{font-family:Arial;font-size:25px;padding:0px;}
.tg  th{font-family:Arial;font-size:25px;font-weight:normal;padding:15px;}
.tg .tg-facebook{background-color:#1e77f0;color:#ffffff;text-align:center}
.tg .tg-instagram{background-color:#e0396b;color:#ffffff;text-align:center}
.tg .tg-x{background-color:#000000;color:#ffffff;text-align:center}
.tg .tg-mastodon{background-color:#5f59f1;text-align:center}
.tg .tg-discord{background-color:#5865f2;color:#ffffff;text-align:center}
#bot a:link, #bot a:visited{color:white;}
#bot a:hover{color:#cccccc;}
</style>
<table class="tg">
  <tr>
    <th class="tg-bluesky"><div id='bot'><a href="#"><i class="fa-brands fa-bluesky"></i></a></div></th>
    <th class="tg-mastodon"><div id='bot'><a href="#"><i class="fa-brands fa-mastodon"></i></a></div></th>
    <th class="tg-discord"><div id='bot'><a href="#"><i class="fa-brands fa-discord"></i></a></div></th>
  </tr>
</table>

 

[Oliver77]

also einen a tag kann man glaub ich nicht um ein th legen, du hast mehrere divs mit der gleichen id, das ist nicht richtig, du kannst denen aber eine Klasse geben und mit einem a Tag wrappen.

 

[Sempervivum]

Wenn Du dir das im Seiteninspektor ansiehst, erkennst Du, dass das Padding, das Du den Tabellenzellen zuweist, daran Schuld ist, dass die a-Elemente viel kleiner sind. Weist Du es statt dessen den a-Elementen zu, ist der ganze Bereich clickbar:

        .tg {
            border-collapse: collapse;
            border-spacing: 0;
            margin-bottom: -20px;
            margin-top: -1px;
        }

        .tg td {
            font-family: Arial;
            font-size: 25px;
            padding: 0px;
        }

        .tg th {
            font-family: Arial;
            font-size: 25px;
            font-weight: normal;
            /* padding: 15px; */
        }

        .tg a {
            padding: 15px;
            display: inline-block;
        }

        .tg .tg-facebook {
            background-color: #1e77f0;
            color: #ffffff;
            text-align: center
        }

        .tg .tg-instagram {
            background-color: #e0396b;
            color: #ffffff;
            text-align: center
        }

        .tg .tg-x {
            background-color: #000000;
            color: #ffffff;
            text-align: center
        }

        .tg .tg-mastodon {
            background-color: #5f59f1;
            text-align: center
        }

        .tg .tg-discord {
            background-color: #5865f2;
            color: #ffffff;
            text-align: center
        }

Die Divs sind überflüssig, ich war so frei und habe sie gelöscht:

    <table class="tg">
        <tr>
            <th class="tg-bluesky">
                <a href="#"><i class="fa-brands fa-bluesky"></i></a>
            </th>
            <th class="tg-mastodon">
                <a href="#"><i class="fa-brands fa-mastodon"></i></a>
            </th>
            <th class="tg-discord">
                <a href="#"><i class="fa-brands fa-discord"></i></a>
            </th>
        </tr>
    </table>