[英]How to style checkbox inside table th td inside bootstrap using css
与其他使用标签和跨度但使用 bootstrap 4 的解决方案一样,它在表 tr td 的结果中看起来不居中,如何居中适合:
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>
如上面的代码所示,结果 put checkbox not fit into th td。 如何使复选框适合内部 th 看起来不错,也适合 td。 我尝试使用 margin:0 和 padding:0 Bootstrap 4 @label Bootstrap 4 @span
感谢您的提前。
我设置
vertical-align: middle;
到td
和th
,它们默认为vertical-align: top;
然后设置checkbox
的height
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.