文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在继续使用bootstrap表类的同时保持粘性标题(表响应和表、表剥离...)

问如何在继续使用bootstrap表类的同时保持粘性标题(表响应和表、表剥离...)
EN

Stack Overflow用户
提问于 2017-04-26 17:45:40
回答 1查看 220关注 0票数 0

这是My code in jsfiddle

我所要做的就是保持一切原样，并使标题粘性。我尝试了很多方法，但都破坏了表响应效果。

我在想，在这一点上，我不能使用css，我正在考虑做一个js脚本来读取所有的元素宽度，并动态地从js重新创建具有相同宽度的标题，并显示(使用navbar-fixed top)滚动页面时触发的标题

但在这之前，有没有更简单的方法呢？

代码语言：javascript
复制
.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

代码语言：javascript
复制
<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>
javascript
jquery
css
twitter-bootstrap
EN

回答 1

Stack Overflow用户

发布于 2017-04-26 17:53:05

请看一下Yavuz Selim Kurnaz https://codepen.io/yavuzselim/pen/LNYrBd的这篇文章

​

代码语言：javascript
复制
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;
      }
    }
  }
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/43630580

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档