javascript - 如何在继续使用 Bootstrap 表类(表响应和表，表剥离......)的同时保持粘性

标签 javascript jquery css twitter-bootstrap

这是 My code in jsfiddle

我想做的就是保持一切原样，并使标题保持粘性 试了很多东西都破坏了table-responsive的效果

我在想此时我不能用 css 做到这一点，我正在考虑制作一个 js 脚本来读取所有 th 元素宽度并动态地从具有相同宽度的 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>

最佳答案

请查看 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>

关于javascript - 如何在继续使用 Bootstrap 表类(表响应和表，表剥离......)的同时保持粘性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43630580/

上一篇：javascript - 如何更改 select2 标签的宽度？

下一篇：javascript - 如何在 AngularJS 中允许事件传播？

相关文章：

javascript - 使用 javascript 检索 <noscript> 标签数据

javascript - KineticJS 无法用图像填充多边形

javascript - 为什么我不能使用 jquery id 值调用函数？

html - Flexbox 不会在移动设备上从行切换到列

javascript - Canvas 中的模糊 svg

javascript - 子文件夹的 Angular Route 出错

javascript - jquery 删除表格行

javascript - 使用google maps api js时无法访问全局变量

javascript - 努力在 JavaScript 和 Ajax 中使用回调

html - 如何在模型框中获取 Google 位置

©2024 IT工具网  联系我们