响应式数据表html

Posted 2023-03-06

【中文标题】响应式数据表html

【英文标题】：Responsive data table html

【发布时间】：2016-12-22 17:59:54

【问题描述】：

我有一个 5 列的表，在移动设备上，它需要为每一行重复每个标题。

我在互联网上没有任何运气（可能是因为我使用了错误的词来搜索它“为每一行 html 重复表头”）...我找到了一个解决方案，但我已经丢失了，但是代码太多，太复杂而无法理解。我正在寻找一些关于我应该如何构建结构的建议/帮助，或者我可能需要做两个完全不同的标记？我也看到了一些插件，但我不被允许使用它们（我是初级职位，他们希望我自己思考如何解决问题）。

我不能提供很多信息....因为我真的不知道该怎么做，但我想这一定是一种不为每一行重复 html 标题的方法...对?

有什么帮助吗？

html:

    <table class="myOrders col-xs-12" border="1">
         <thead>
         <tr class="headers col-xs-12">
           <th class="col-sm-3 col-x-7">ORDER PLACED</th>
           <th class="col-sm-2 col-x-7">ORDER ID</th>
           <th class="col-sm-2 col-x-7">ORDER REF</th>
           <th class="col-sm-3 col-x-7">ORDER AMOUNT</th>
           <th class="col-sm-2 col-x-7">STATUS</th>
         </tr>
         </thead>
         <tbody>
         <tr class="order col-xs-12">
        <td class="datePlaced col-sm-3 col-x-7"><span>2016-05-12</span><span>15.13.56</span></td>
           <td class="ident col-sm-2 col-x-7">AW 1234-165</td>
           <td class="ref col-sm-2 col-x-7">SMRF123</td>
           <td class="amount col-sm-3 col-x-7">£23.33</td>
           <td class="status col-sm-2 col-x-7">Pending</td>
    </tr>   
              <tr class="order col-xs-12">
        <td class="datePlaced col-sm-3 col-x-7"><span>2016-05-12</span><span>15.13.56</span></td>
           <td class="ident col-sm-2 col-x-7">AW 1234-165</td>
           <td class="ref col-sm-2 col-x-7">SMRF123</td>
           <td class="amount col-sm-3 col-x-7">£23.33</td>
           <td class="status col-sm-2 col-x-7">Pending</td>
    </tr>   
              <tr class="order col-xs-12">
        <td class="datePlaced col-sm-3 col-x-7"><span>2016-05-12</span><span>15.13.56</span></td>
           <td class="ident col-sm-2 col-x-7">AW 1234-165</td>
           <td class="ref col-sm-2 col-x-7">SMRF123</td>
           <td class="amount col-sm-3 col-x-7">£23.33</td>
           <td class="status col-sm-2 col-x-7">Pending</td>
    </tr>   
         </tbody>
</table>

css:

table td[class*="col-"], 
table th[class*="col-"] 
    float: left;

这是期望的行为：

https://jsfiddle.net/zzxac8ew/

【问题讨论】：

查看我的博客链接可能对你有帮助tadhanilalji.blogspot.in/2014/11/…

【参考方案1】：

不知道为什么要一遍又一遍地重复相同的标题。我认为粘性标题会更好，并且有 jQuery 插件。

试试这个：http://mkoryak.github.io/floatThead/

【讨论】：

好吧，我想重复它的显示，这是客户想要的。我想我可以通过 jquery 一遍又一遍地为每一行显示标题来做到这一点......但我不知道从哪里开始！正如我所提到的，我不能使用任何插件，因为我处于初级职位，现在我应该能够自己做事了：S（这是我的主管所说的）。

【参考方案2】：

将data-th 与TD 一起使用

@media screen and (max-width: 640px) 
    table#customDataTable caption 
        background-image: none;
    

    table#customDataTable thead 
        display: none;
    

    table#customDataTable tbody td 
        display: block;
        padding: .6rem;
    

    table#customDataTable tbody tr td:first-child 
        background: #666;
        color: #fff;
    

        table#customDataTable tbody tr td:first-child a 
            color: #fff;
        

        table#customDataTable tbody tr td:first-child:before 
            color: rgb(225,181,71);
        

    table#customDataTable tbody td:before 
        content: attr(data-th);
        font-weight: bold;
        display: inline-block;
        width: 10rem;
    

    table#customDataTable tr th:last-child, table#customDataTable tr td:last-child 
        max-width: 100% !important;
        min-width: 100px !important;
        width: 100% !important;
    

       <table id="customDataTable" class="myOrders col-xs-12" border="1">
         <thead>
         <tr class="headers col-xs-12">
           <th class="col-sm-3 col-x-7">ORDER PLACED</th>
           <th class="col-sm-2 col-x-7">ORDER ID</th>
           <th class="col-sm-2 col-x-7">ORDER REF</th>
           <th class="col-sm-3 col-x-7">ORDER AMOUNT</th>
           <th class="col-sm-2 col-x-7">STATUS</th>
         </tr>
         </thead>
         <tbody>
         <tr class="order col-xs-12">
	    <td data-th="ORDER PLACED" class="datePlaced col-sm-3 col-x-7"><span>2016-05-12</span><span>15.13.56</span></td>
           <td data-th="ORDER ID" class="ident col-sm-2 col-x-7">AW 1234-165</td>
           <td data-th="ORDER REF" class="ref col-sm-2 col-x-7">SMRF123</td>
           <td data-th="ORDER AMOUNT" class="amount col-sm-3 col-x-7">£23.33</td>
           <td data-th="STATUS" class="status col-sm-2 col-x-7">Pending</td>
	</tr>	
             <tr class="order col-xs-12">
	    <td data-th="ORDER PLACED" class="datePlaced col-sm-3 col-x-7"><span>2016-05-12</span><span>15.13.56</span></td>
           <td data-th="ORDER ID" class="ident col-sm-2 col-x-7">AW 1234-165</td>
           <td data-th="ORDER REF" class="ref col-sm-2 col-x-7">SMRF123</td>
           <td data-th="ORDER AMOUNT" class="amount col-sm-3 col-x-7">£23.33</td>
           <td data-th="STATUS" class="status col-sm-2 col-x-7">Pending</td>
	</tr>	
  <tr class="order col-xs-12">
	    <td data-th="ORDER PLACED" class="datePlaced col-sm-3 col-x-7"><span>2016-05-12</span><span>15.13.56</span></td>
           <td data-th="ORDER ID" class="ident col-sm-2 col-x-7">AW 1234-165</td>
           <td data-th="ORDER REF" class="ref col-sm-2 col-x-7">SMRF123</td>
           <td data-th="ORDER AMOUNT" class="amount col-sm-3 col-x-7">£23.33</td>
           <td data-th="STATUS" class="status col-sm-2 col-x-7">Pending</td>
	</tr>	
         </tbody>
</table>

https://jsfiddle.net/zzxac8ew/1/

【讨论】：

哇！它看起来很漂亮！给我一秒钟看看:)谢谢

它运行良好，而且干净且易于理解。太感谢了！顺便说一句：你不是在找补习工作，是吗？ ^^