Wie gesamte Tabellenzelle anklickbar machen, wenn es einen Hyperlink hat - mit Bootstrap-v3

Dies ist, wie ich versuche, aber es nichtWie gesamte Tabellenzelle anklickbar machen, wenn es einen Hyperlink hat - mit Bootstrap-v3

Das einzige, was ist, erhält sie 100% Breite gleich Tabelle Zellenbreite funktioniert aber die Höhe ändert sich nicht. Wie kann ich die gesamte Tabellenzelle klickbar machen?

Hier ist, was ich tun

<td><a href="Default.aspx?ClusterId=1" class="btn-full">click here</a></td>

Und das ist in meinem CSS-Datei

.btn-full { 
    display: block; 
    width: 100%; 
    height: 100%; 
}

Die Bootstrap-Version i verwenden ist v 3.3.6

ich mit der neuesten Version Chrom Prüfung am : Version 51.0.2704.106 m

Quelle

2016-06-29 MonsterMMORPG

Try Klasse hinzufügen = "btn btn-default" zu –

@ onedevteam.com immer noch nicht funktioniert versucht: D https: // i .snag.gy/uqIHT9.jpg – MonsterMMORPG

und entfernen btn-full von ? –

Möglich damit.

td{ 
 
    position:relative; 
 
} 
 
td a{ 
 
    display: block; 
 
    text-align: center; 
 
    padding: 10em; 
 
    margin: -10em; 
 
}

<table border="1"> 
 
    <tr> 
 
    <td>this is heading of cell 1</td> 
 
    <td>this is heading of cell 2</td> 
 
    <td>this is heading of cell 3</td> 
 
    <td>this is heading of cell 4</td> 
 
    </tr> 
 
    <tr> 
 
    <td>one<br>one</td> 
 
    <td><a href="#">Two</a></td> 
 
    <td>three</td> 
 
    <td>four</td> 
 
    </tr> 
 
    <tr> 
 
    <td>one</td> 
 
    <td><a href="#">Two</a></td> 
 
    <td>three</td> 
 
    <td>four</td> 
 
    </tr> 
 
    <tr> 
 
    <td>one</td> 
 
    <td><a href="#">Two</a></td> 
 
    <td>three</td> 
 
    <td>four</td> 
 
    </tr> 
 
    <tr> 
 
    <td>one</td> 
 
    <td><a href="#">Two</a></td> 
 
    <td>three</td> 
 
    <td>four</td> 
 
    </tr> 
 
    <tr> 
 
    <td>one</td> 
 
    <td><a href="#">Two</a></td> 
 
    <td>three</td> 
 
    <td>four</td> 
 
    </tr> 
 
    <tr> 
 
    <td>one</td> 
 
    <td><a href="#">Two</a></td> 
 
    <td>three</td> 
 
    <td>four</td> 
 
    </tr> 
 
    <tr> 
 
    <td>one</td> 
 
    <td><a href="#">Two</a></td> 
 
    <td>three</td> 
 
    <td>four</td> 
 
    </tr> 
 
</table>

Quelle

2016-06-29 11:11:44

gut, ich muss immer noch Reaktionsfähigkeit in der mobilen Erfahrung halten. Wird es das brechen? – MonsterMMORPG

Nein wird es nicht, weil '' nach seiner '' platziert wird und '' wird in reaktionsfähig sein auch unabhängig von der Größe. –

ja ich gerade versucht, aber das bricht vertikale align middle :( – MonsterMMORPG

In Ihrem Fall, da andere td in derselben Zeile mehr Inhalt haben, müssen Sie alle Ihre td Inhalte gleiche Höhe machen. Der folgende Code sollte für das obige Problem funktionieren.

td{overflow:hidden;} 
    .btn-full { 
    display: block; 
    width: 100%; 
    height: 100%; 
    margin:-1000px; 
    padding: 1000px; 
}

Quelle

2016-06-29 11:12:00 San

aber das kann ziemlich viel Reaktionsfähigkeit richtig brechen? – MonsterMMORPG

Es wird nicht die Reaktionsfähigkeit brechen. Es wird normal funktionieren, wie eine Tabelle funktioniert. Nur dass dein td-Inhalt gleich groß ist. – San

funktioniert nicht wie erwartet: https://i.snag.gy/r5yzBd.jpg – MonsterMMORPG

Versuchen Sie, diese


 
td a{ 
 
     width:100%; 
 
     line-height:40px; 
 
     display:inline-block; 
 
     vertical-align:middle; 
 
}

<table border="1"> 
 
    <tr> 
 
    <td>heading 1</td> 
 
    <td>heading 2 with extra space</td> 
 
    <td>heading 3</td> 
 
    <td>heading 4</td> 
 
    </tr> 
 
    <tr> 
 
    <td>one</td> 
 
    <td><a href="#">Two</a></td> 
 
    <td>three</td> 
 
    <td>four</td> 
 
    </tr> 
 
    <tr> 
 
    <td>one</td> 
 
    <td><a href="#">Two</a></td> 
 
    <td>three</td> 
 
    <td>four</td> 
 
    </tr> 
 
</table>

Quelle

2016-06-29 11:20:57 WitVault

Höhe ist immer noch gleich. Ich möchte die Höhe des Hyperlinks gleich sein wie die Höhe der Tabellenzelle – MonsterMMORPG

Die Antwort @MonsterMMORPG – WitVault

aktualisiert hat es manuelle Zeilenhöhe :( – MonsterMMORPG

Wie gesamte Tabellenzelle anklickbar machen, wenn es einen Hyperlink hat - mit Bootstrap-v3

Antwort

Verwandte Themen