Bir Bootstrap Tablo Hücresi

Question

Bir Bootstrap Tablosunda yalnızca CSS'yi kullanarak bir onay kutusunu işaretleyin. (Başka bir basit yolu yoksa bazı JavaScriptler)

Tablo hücresini tamamen doldurmak için <label> öğesinin bir onay kutusu için nasıl edinebilirim?

Önyükleyici 8px'lik bir dolguya sahiptir, ancak diğer hücreler için bu dolguyu bozmak ve tabloyu duyarlı tutmak istemiyorum.

Örnek:

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

Answer 1

Ekleme belirli td için sınıf ve etiket ve td için özel css geçerlidir: @Justinas cevabı daha şık olmasına rağmen

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

imo, ayrıca sınıfları değiştirmeden de yapabilirsiniz:

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>