How to make table display in columns on mobile devices

Question

I am currenlty making a table which compares the differences between clutch designs for vehicles. The table looks like this:

#clutch-types td {
    border: 1px solid #ddd;
}
#clutch-types {
    width: 100%;
    border-collapse: collapse;
}
#clutch-types td img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#clutch-types td {
    text-align: center;
    padding: 8px;
}
.clutch-attribute {
    font-weight: bolder;
}
.clutch-info {
    border: 0 !important;
    background: #FFF;
}
#which-clutch-design {
    word-spacing: 9999999px;
    font-size: 30px;
    color: black;
    text-align: center;
    padding: 10px;
}
.clutch-design {
    padding: 10px
}
#clutch-types tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}




  

Which Clutch Design?
HD (Organic)
Twin Friction
Paddle


Reinforced high copper friction material.
The aramid friction exhibits 50% less wear than a conventional drive plate friction material.
For the more advanced builds running higher power and for track use.







Materials
Organic
Organic & Ceramic Pad
Ceramic Pad


Power Rating
30%
60%
65%


Track Use
✖
✔
✔


Weight
4.5 kg
4.9 kg
5.1 kg


Bedding In
200-300 Miles
750-1000 Miles
400-500 Miles


Pedal Effort
Minimal
Minimal
Moderate


Additional Information

I want to display the table on mobile devices like the following:

#clutch-types td {
    border: 1px solid #ddd;
}
#clutch-types {
    width: 100%;
    border-collapse: collapse;
}
#clutch-types td img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#clutch-types td {
    text-align: center;
    padding: 8px;
}
.clutch-attribute {
    font-weight: bolder;
}
.clutch-info {
    border: 0 !important;
    background: #FFF;
}
#which-clutch-design {
    word-spacing: 9999999px;
    font-size: 30px;
    color: black;
    text-align: center;
    padding: 10px;
}
.clutch-design {
    padding: 10px
}
#clutch-types tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}



Which Clutch Design?
HD (Organic)


Reinforced high copper friction material.





Materials
Organic


Power Rating
30%


Track Use
✖


Weight
4.5 kg


Bedding In
200-300 Miles


Pedal Effort
Minimal


Additional Information



Twin Friction


The aramid friction exhibits 50% less wear than a conventional drive plate friction material.





Materials
Organic & Ceramic Pad


Power Rating
60%


Track Use
✔


Weight
4.9 kg


Bedding In
750-1000 Miles


Pedal Effort
Minimal


Additional Information




Paddle


For the more advanced builds running higher power and for track use.





Materials
Ceramic Pad


Power Rating
65%


Track Use
✖


Weight
5.1 kg


Bedding In
400-500 Miles


Pedal Effort
Morderate


Additional Information

I am currently using:

.clutch-types-mobile {
display: none;
}
@media only screen and (max-width:440px) {
.clutch-types-mobile {
display: table;
}
.clutch-types-desktop {
display: none;
}
}

to display between the two however I would prefer using css to display the table in the mobile format. I have saw guides such as: https://css-tricks.com/responsive-data-tables/

and these work great, however doesn't display the table in the format i'd like.

Any help appreciated, cheers.

How to make table display in columns on mobile devices

0 Answers