Wie man td Inhalt füllt den gesamten Elternteil?

Question

Kann der Inhalt einer Tabellenzelle die gesamte Zelle füllen?

Ich habe eine einfache Form in einer Tabelle organisiert, Etiketten auf der linken Seite, Eingaben auf der rechten Seite und ich möchte die Etiketten "full-size", so dass der Benutzer größere anklickbare Fläche hat. Momentan muss er genau auf den Etikettentext klicken, aber die Tabellenzelle ist viel größer und es wäre besser, wenn das Etikett erweitert würde.

<td> 
    <label for="id">Click here will focus the corresponding input</label> 
</td> 

Irgendwelche Ideen?

Danke

Answer 1

Wenn Sie nur die Breite des Mutter td bedeuten, dann können Sie einstellen, die label-display:block:

<table border="1" width="100%"> 
    <tr> 
     <td> 
      <label for="id">Click here will focus the corresponding input</label> 
     </td> 
    </tr> 
</table> 

td 
{ 
    background:pink; 
} 
td label 
{ 
    background:yellow; 
    display:block; 
} 

https://jsfiddle.net/kn5ypr96/

Wenn Sie das Etikett die füllen Höhe und Breite, dann ist ein anderer Ansatz erforderlich:

td 
{ 
    background:pink; 
    height:100px; 
} 
td label 
{ 
    background:yellow; 
    display:block; 
    height:100%; 
} 

wird die Höhe und Breite füllen. https://jsfiddle.net/bL9nvxd0/