响应数据表html

Question

我有一个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/

Answer 1

使用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/