CODEWITHSUNDEEP
htmlcssbootstrap-4
beni pr
beni pr

Reputation: 37

How to style checkbox inside table th td inside bootstrap using css

As with other solution using label and span but with bootstrap 4 it look not center in result with table tr td, how to center fit good:

span.bigcheck {
    font-family: sans-serif;
    font-weight: 500;
    font-size: 2em; 
}

span.bigcheck-target {
  font-family: FontAwesome; /* Use an icon font for the checkbox */
}

input[type='checkbox'].bigcheck {
  position: relative;
  left: -999em; /* Hide the real checkbox */
}

input[type='checkbox'].bigcheck + span.bigcheck-target:after {
  content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */
}

input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
  content: "\f046"; /* fontawesome checked box (fa-check-square-o) */
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<table class='table table-sm tbl1 table-hover borderless font_fake' style='width:auto'>
<thead>
<tr>
<th>
<span class="bigcheck">
<label class="bigcheck">
<input type="checkbox" class="bigcheck" id="selectAll" />
<span class="bigcheck-target"></span>
</label>
</span>
</th>	
<th>TH TITLE</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="bigcheck">
  <label class="bigcheck">
    <input type="checkbox" class="bigcheck" name="cheese" value="yes" />
    <span class="bigcheck-target"></span>
  </label>
</span>
</td>
<td>td desc 1</td>
</tr>
<tr>
<td>
<span class="bigcheck">
  <label class="bigcheck">
    <input type="checkbox" class="bigcheck" name="cheese" value="yes" />
    <span class="bigcheck-target"></span>
  </label>
</span>
</td>
<td>td desc 2</td>
</tr>
<tr>
<td>
<span class="bigcheck">
  <label class="bigcheck">
    <input type="checkbox" class="bigcheck" name="cheese" value="yes" />
    <span class="bigcheck-target"></span>
  </label>
</span>
</td>
<td>td desc 3</td>
</tr>
</tbody>
</table>

As see at code above the result put checkbox not fit into th td. How to make check box fit inside th look nice and fit into td also. I was try using margin:0 and padding:0 Bootstrap 4 @label Bootstrap 4 @span

Thanks for advance.

Upvotes: 0

Views: 1328

Answers (1)

Awais
Awais

Reputation: 4902

I set vertical-align: middle; to td and th which are by default vertical-align: top; and second set the height of checkbox

span.bigcheck {
       font-family: sans-serif;
    font-weight: 500;
    font-size: 2em;
    display: inline-block;
    height: 36px;
}

span.bigcheck-target {
  font-family: FontAwesome; /* Use an icon font for the checkbox */
}

input[type='checkbox'].bigcheck {
  position: relative;
  left: -999em; /* Hide the real checkbox */
}

input[type='checkbox'].bigcheck + span.bigcheck-target:after {
  content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */
}

input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
  content: "\f046"; /* fontawesome checked box (fa-check-square-o) */
}
table tr td,table tr th{
   vertical-align: middle !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<table class='table table-sm tbl1 table-hover borderless font_fake' style='width:auto'>
<thead>
<tr>
<th>
<span class="bigcheck">
<label class="bigcheck">
<input type="checkbox" class="bigcheck" id="selectAll" />
<span class="bigcheck-target"></span>
</label>
</span>
</th>	
<th>TH TITLE</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="bigcheck">
  <label class="bigcheck">
    <input type="checkbox" class="bigcheck" name="cheese" value="yes" />
    <span class="bigcheck-target"></span>
  </label>
</span>
</td>
<td>td desc 1</td>
</tr>
<tr>
<td>
<span class="bigcheck">
  <label class="bigcheck">
    <input type="checkbox" class="bigcheck" name="cheese" value="yes" />
    <span class="bigcheck-target"></span>
  </label>
</span>
</td>
<td>td desc 2</td>
</tr>
<tr>
<td>
<span class="bigcheck">
  <label class="bigcheck">
    <input type="checkbox" class="bigcheck" name="cheese" value="yes" />
    <span class="bigcheck-target"></span>
  </label>
</span>
</td>
<td>td desc 3</td>
</tr>
</tbody>
</table>

Upvotes: 2

Related Questions