如何在继续使用引导表类的同时使用粘性thead（表响应和表，表剥离....）

时间：2017-04-26 09:45:40

标签： javascript jquery css twitter-bootstrap

这是 My code in jsfiddle

我想做的就是保持原样，并使标题变得粘稠 我已经尝试了很多东西，但它们都破坏了表格响应效果

我正在考虑在这一点上我不能用css来做这件事而我正在考虑制作一个js脚本来读取所有元素的宽度并从js中动态地重新创建具有相同宽度的thead并显示（使用navbar-fixed-top）触发滚动页面

但在此之前还有一种更简单的方法吗？

.md-checkbox-list .md-checkbox {
    display: block;
    margin-bottom: 10px;

}

.md-checkbox {
    position: relative;

}

.md-checkbox input[type=checkbox] {
    display: none;
    position: absolute;

}

.md-checkbox label>.check {
    top: -4px;
    right: 6px;
    width: 10px;
    height: 20px;
    border: 2px solid #36c6d3;
    border-top: none;
    border-left: none;
    opacity: 0;
    z-index: 5;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -webkit-transition-delay: .3s;
    -moz-transition-delay: .3s;
    transition-delay: .3s;
}

.md-checkbox label>span {
    display: block;
    position: absolute;
    right: 0;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s;
    margin-right: 15px
}

.md-checkbox label {
    cursor: pointer;
}

.md-checkbox label>.box {
    top: 0;
    border: 2px solid #666;
    height: 20px;
    width: 20px;
    z-index: 5;
    -webkit-transition-delay: .2s;
    -moz-transition-delay: .2s;
    transition-delay: .2s;
}

.md-checkbox input[type=checkbox]:checked~label>.check {
    opacity: 1;
    -webkit-transform: scale(1) rotate(45deg);
    -moz-transform: scale(1) rotate(45deg);
    transform: scale(1) rotate(45deg);
}

.md-checkbox input[type=checkbox]:checked~label>.box {
    opacity: 0;
    -webkit-transform: scale(0) rotate(180deg);
    -moz-transform: scale(0) rotate(180deg);
    transform: scale(0) rotate(180deg);
}

#att-list td {
    cursor: pointer;
}

这是html 

<section>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 ar">
                <div class="text-center"><h3><b>Table Name</b></h3></div>                           
            <div class="col-md-12 text-center mv-10">
                search: 
                <input type="text" id="att-list-search" style='width: 90%' placeholder="Att. No., Name, Name AR, Natio. ID, Mobile, Email" autofocus>
            </div>
            <div class="col-md-12 table-responsive ar" style="overflow-y: auto; height: 550px;" >
                <table class="table table-striped table-bordered table-hover table-inverse table-fixed-head" id="att-list" >
                    <thead>
                        <tr>
                            <th class="text-center" style="vertical-align: middle; font-weight: bold;">Att. No.</th>
                            <th class="text-center" style="vertical-align: middle; font-weight: bold;">Name</th>
                            <th class="text-center" style="vertical-align: middle; font-weight: bold;">Name AR</th>
                            <th class="text-center" style="vertical-align: middle; font-weight: bold;">Natio. ID</th>
                            <th class="text-center" style="vertical-align: middle; font-weight: bold;">Mobile</th>
                            <th class="text-center" style="vertical-align: middle; font-weight: bold;">Email</th>
                            <th class="text-center" style="width: 70px; min-width: 70px; vertical-align: middle; font-weight: bold;">Att.</th>
                            <th class="text-center" style="width: 70px; min-width: 70px; vertical-align: middle; font-weight: bold;">Lic.</th>
                            <th class="text-center" style="width: 70px; min-width: 70px; vertical-align: middle; font-weight: bold;">Int. Lic</th>
                            <th class="text-center" style="width: 70px; min-width: 70px; vertical-align: middle; font-weight: bold;">payed</th>
                            <th class="text-center" style="width: 70px; min-width: 70px; vertical-align: middle; font-weight: bold;">Print</th>
                            <th class="text-center" style="width: 70px; min-width: 70px; vertical-align: middle; font-weight: bold;">Delivery</th>
                        </tr>
                    </thead>
                    <tbody id="att-list-table">
                        <tr class="text-center"><td class="ltr ">10361278</td>
                        <td class="ltr ">name</td>
                        <td class="ltr ">ar_name</td>
                        <td>id_number</td>
                        <td>0531234567</td>
                        <td>email@domain.com</td>
                        <td><div class="md-checkbox"><input type="checkbox" id="att||1" class="md-check" checked="" disabled=""><label for="att||1"><span id="cust-marg"></span><span class="check"></span><span class="box"></span></label></div></td>
                        <td><div class="md-checkbox"><input type="checkbox" id="lic_req||1" class="md-check" checked="" disabled=""><label for="lic_req||1"><span id="cust-marg"></span><span class="check"></span><span class="box"></span></label></div></td>
                        <td><div class="md-checkbox"><input type="checkbox" id="int_lic_req||1" class="md-check" checked="" disabled=""><label for="int_lic_req||1"><span id="cust-marg"></span><span class="check"></span><span class="box"></span></label></div></td>
                        <td><div class="md-checkbox"><input type="checkbox" id="pay||1" class="md-check" checked="" disabled=""><label for="pay||1"><span id="cust-marg"></span><span class="check"></span><span class="box"></span></label></div></td>
                        <td><div class="md-checkbox"><input type="checkbox" id="print||1" class="md-check"><label for="print||1"><span id="cust-marg"></span><span class="check"></span><span class="box"></span></label></div></td>
                        <td><div class="md-checkbox"><input type="checkbox" id="received||1" class="md-check"><label for="received||1"><span id="cust-marg"></span><span class="check"></span><span class="box"></span></label></div></td>
                        </tr>

                        <tr class="text-center"><td class="ltr ">10361275</td>
                        <td class="ltr ">name</td>
                        <td class="ltr ">ar_name</td>
                        <td>id_number</td>
                        <td>0531234567</td>
                        <td>email@domain.com</td>
                        <td><div class="md-checkbox"><input type="checkbox" id="att||2" class="md-check" checked="" disabled=""><label for="att||2"><span id="cust-marg"></span><span class="check"></span><span class="box"></span></label></div></td>
                        <td><div class="md-checkbox"><input type="checkbox" id="lic_req||2" class="md-check"><label for="lic_req||2"><span id="cust-marg"></span><span class="check"></span><span class="box"></span></label></div></td>
                        <td><div class="md-checkbox"><input type="checkbox" id="int_lic_req||2" class="md-check"><label for="int_lic_req||2"><span id="cust-marg"></span><span class="check"></span><span class="box"></span></label></div></td>
                        <td><div class="md-checkbox"><input type="checkbox" id="pay||2" class="md-check"><label for="pay||2"><span id="cust-marg"></span><span class="check"></span><span class="box"></span></label></div></td>
                        <td><div class="md-checkbox"><input type="checkbox" id="print||2" class="md-check"><label for="print||2"><span id="cust-marg"></span><span class="check"></span><span class="box"></span></label></div></td>
                        <td><div class="md-checkbox"><input type="checkbox" id="received||2" class="md-check"><label for="received||2"><span id="cust-marg"></span><span class="check"></span><span class="box"></span></label></div></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            </div>
            <div class="text-center rtl" style="margin: 0 auto;" id="att-list-info"></div>
        </div>
    </div>
</section>

1 个答案:

答案 0 :(得分：0)

请看看Yavuz Selim Kurnaz https://codepen.io/yavuzselim/pen/LNYrBd

的这个代码 

body{
  background-color: #bdc3c7;
}
.table-fixed{
  width: 100%;
  background-color: #f3f3f3;
  tbody{
    height:200px;
    overflow-y:auto;
    width: 100%;
    }
  thead,tbody,tr,td,th{
    display:block;
  }
  tbody{
    td{
      float:left;
    }
  }
  thead {
    tr{
      th{
        float:left;
       background-color: #f39c12;
       border-color:#e67e22;
      }
    }
  }
}
<div class="container">
  <table class="table table-fixed">
    <thead>
      <tr>
        <th class="col-xs-3">First Name</th>
        <th class="col-xs-3">Last Name</th>
        <th class="col-xs-6">E-mail</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>

      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
    </tbody>
  </table>
</div>

相关问题
最新问题