Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <table>
          <thead role="rowgroup">
            <tr role="row">
              <th role="columnheader" data-field="id" rowspan="1"
              data-title="" data-index="0" class="k-header">
                <div class="text-center">
                  <label class="px-single"><input type="checkbox" class="px" id=
                  "check-all-main">
                <span class="lbl"></span></label>
                </div>
              </th>
 
              <th role="columnheader" data-field="name" rowspan="1"
              data-title="Name" data-index="1" class=
              "k-header k-with-icon k-filterable" data-role=
              "columnsorter" data-dir="asc" aria-sort="ascending">
              <a class="k-grid-filter" href="#" tabindex=
              "-1"></a><a class="k-link" href="#">Name</a></th>
 
              <th role="columnheader" data-field="title" rowspan=
              "1" data-title="Title" data-index="2" class=
              "k-header k-with-icon k-filterable" data-role=
              "columnsorter"><a class="k-grid-filter" href="#"
              tabindex="-1"></a><a class="k-link" href=
              "#">Title</a></th>
            </tr>
          </thead>
        </table>
 
      <table role="grid">
        <tbody role="rowgroup">
          <tr role=
          "row">
            <td role="gridcell">
              <div class="text-center">
                <label class="px-single"><input type="checkbox" class="px check-main">
                <span class="lbl"></span></label>
              </div>
            </td>
 
            <td role="gridcell">Test</td>
 
            <td role="gridcell">VP Technology</td>
          </tr>
 
          <tr class="k-alt" role="row">
            <td role="gridcell">
              <div class="text-center">
                <label class="px-single"><input type="checkbox" class="px check-main">
                <span class="lbl"></span></label>
              </div>
            </td>
 
            <td role="gridcell">Test</td>
 
            <td role="gridcell">-</td>
          </tr>
 
          <tr role=
          "row">
            <td role="gridcell">
              <div class="text-center">
                <label class="px-single"><input type="checkbox" class="px check-main">
                <span class="lbl"></span></label>
              </div>
            </td>
 
            <td role="gridcell">Test</td>
 
            <td role="gridcell">-</td>
          </tr>
 
          <tr class="k-alt" role="row">
            <td role="gridcell">
              <div class="text-center">
                <label class="px-single"><input type="checkbox" class="px check-main">
                <span class="lbl"></span></label>
              </div>
            </td>
 
            <td role="gridcell">Test</td>
 
            <td role="gridcell">-</td>
          </tr>
 
          <tr role="row">
            <td role="gridcell">
              <div class="text-center">
                <label class="px-single"><input type="checkbox" class="px check-main">
                <span class="lbl"></span></label>
              </div>
            </td>
 
            <td role="gridcell">Test</td>
 
            <td role="gridcell">-</td>
          </tr>
        </tbody>
      </table>
  
</body>
</html>
 
.px-single input.px {
  margin: 0 !important;
}
input.px {
  position: absolute !important;
  left: -1000000px !important;
  margin: 0 !important;
  padding: 0 !important;
}
input.px + .lbl {
  position: relative;
  padding-left: 1px;
  display: inline-block;
}
.px-single input.px + .lbl {
  padding: 0 !important;
  width: 15px !important;
  height: 15px !important;
}
input.px:focus + .lbl:before,
input.px + .lbl:hover:before {
  border-color: #1d89cf;
}
input.px + .lbl:before {
  content: "";
  opacity: 1;
  border: 1px solid #bbb;
  background: #fff;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
}
input[type="checkbox"].px + .lbl:after {
  color: #1d89cf;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers