Aktivieren Sie ein Kontrollkästchen, indem Sie auf eine Bootstrap-Tabellenzelle klicken

Question

Nur CSS in einer Bootstrap-Tabelle verwenden. (Etwas JavaScript, wenn es keinen anderen einfachen Weg gibt)

Wie kann ich das <label> Element für ein Kontrollkästchen erhalten, um die Tabellenzelle vollständig zu füllen?

Bootstrap hat eine Auffüllung von 8px, aber ich möchte nicht, dass die Polsterung für die anderen Zellen stören, und auch die Tabelle reagieren.

Beispiel:

<table class="table table-striped table-condensed"> 
    <tr> 
     <td> 
      <label> 
       <input type="checkbox"/> 
      </label> 
     </td> 
    </tr> 
</table> 

Answer 1

Add-Klasse auf diese spezifischen td und benutzerdefinierte CSS für Etiketten- und td gilt:

table { 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    padding: 8px; 
 
    background-color: #ddd; 
 
    border: 1px solid #898989; 
 
} 
 
.labeled { 
 
    padding: 0; 
 
} 
 
.labeled label { 
 
    display: inline-block; 
 
    padding: 8px; 
 
    background-color: rgba(0, 200, 0, .3); 
 
}

<table class="table table-striped table-condensed"> 
 
    <tr> 
 
    <td class="labeled"> 
 
     <label> 
 
     <input type="checkbox" /> 
 
     </label> 
 
    </td> 
 
    <td> 
 
     Other TD 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Obwohl die Antwort von @Justinas elegantere Imo, Sie können es auch tun, ohne Klassen zu ändern:

table { 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    padding: 8px; 
 
    background-color: #ddd; 
 
    border: 1px solid #898989; 
 
} 
 

 
td > label { 
 
    display: inline-block; 
 
    margin: -8px; 
 
    padding: 8px; 
 
    background-color: rgba(0, 200, 0, .3); 
 
}

<table class="table table-striped table-condensed"> 
 
    <tr> 
 
    <td> 
 
     <label> 
 
     <input type="checkbox" /> 
 
     </label> 
 
    </td> 
 
    <td> 
 
     Other TD 
 
    </td> 
 
    </tr> 
 
</table>