Responsive data table html

Question

I have a 5 column table, that on mobile, it needs to repeat each header for each row.

I am not having any luck looking around internet (probably because I am using the wrong words to search for it "repeat table headers for each row html")... I found one solution, which I have lost already, but it was so much code, and too complicated to understand. I am looking for some advice/help about how should I build the structure or maybe I need to do two markups completely different? I have also seen some plugins, but I am not allowed to use them (I am on a junior position and they want me to think about how to solve problems by myself).

I can't give a lot of information.... as I don't really know how to do it, but I guess it must be a way for no repeating the headers on html for every row... right?

Any help?

html:

    
         
         
           ORDER PLACED
           ORDER ID
           ORDER REF
           ORDER AMOUNT
           STATUS
         
         
         
         
        2016-05-1215.13.56
           AW 1234-165
           SMRF123
           £23.33
           Pending
       
              
        2016-05-1215.13.56
           AW 1234-165
           SMRF123
           £23.33
           Pending
       
              
        2016-05-1215.13.56
           AW 1234-165
           SMRF123
           £23.33
           Pending

css:

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

And this is the desired behaviour:

https://jsfiddle.net/zzxac8ew/

Lalji Tadhani · Accepted Answer

Use data-th with 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;
    }
}

       
         
         
           ORDER PLACED
           ORDER ID
           ORDER REF
           ORDER AMOUNT
           STATUS
         
         
         
         
	    2016-05-1215.13.56
           AW 1234-165
           SMRF123
           £23.33
           Pending
		
             
	    2016-05-1215.13.56
           AW 1234-165
           SMRF123
           £23.33
           Pending
		
  
	    2016-05-1215.13.56
           AW 1234-165
           SMRF123
           £23.33
           Pending

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

Responsive data table html

Answers (2)

Related Questions