JSFiddle - React, Tailwind, and code Playground

Responsive CSS table, that turns into an accordion menu on small screens. Change Radio inputs to Checkboxes to expand multiple sections.

by Jennifer Perrin

HTML

<div id="table">
    <div class="header-row row"> <span class="cell primary">Vehcile</span>
         <span class="cell">Exterior</span>
         <span class="cell">Interior</span>
         <span class="cell">Engine</span>
         <span class="cell">Trans</span>
    </div>
    <div class="row">
        <input type="radio" name="expand"> <span class="cell primary" data-label="Vehicle">2013 Subaru WRX</span>
 <span class="cell" data-label="Exterior">World Rally Blue</span>
 <span class="cell" data-label="Interior">Black</span>
 <span class="cell" data-label="Engine">2.5L H4 Turbo</span>
 <span class="cell" data-label="Trans">5 Speed</span>

    </div>
    <div class="row">
        <input type="radio" name="expand"> <span class="cell primary" data-label="Vehicle">2013 Subaru WRX STI</span>
 <span class="cell" data-label="Exterior">Crystal Black Silica</span>
 <span class="cell" data-label="Interior">Black</span>
 <span class="cell" data-label="Engine">2.5L H4 Turbo</span>
 <span class="cell" data-label="Trans">6 Speed</span>

    </div>
    <div class="row">
        <input type="radio" name="expand"> <span class="cell primary" data-label="Vehicle">2013 Subaru BRZ</span>
 <span class="cell" data-label="Exterior">Dark Grey Metallic</span>
 <span class="cell" data-label="Interior">Black</span>
 <span class="cell" data-label="Engine">2.0L H4</span>
 <span class="cell" data-label="Trans">6 Speed</span>

    </div>
    <div class="row">
        <input type="radio" name="expand"> <span class="cell primary" data-label="Vehicle">2013 Subaru Legacy</span>
 <span class="cell" data-label="Exterior">Satin White Pearl</span>
 <span class="cell" data-label="Interior">Black</span>
 <span class="cell" data-label="Engine">2.5L H4</span>
 <span class="cell" data-label="Trans">Auto</span>

    </div>
    <div class="row">
        <input type="radio" name="expand"> <span class="cell primary" data-label="Vehicle">2013 Subaru Legacy</span>
 <span class="cell"...

CSS

body {
	    background: #cacaca;
	    margin: 0;
	    padding: 20px;
	    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	    font-weight: 300;
	}
	#table {
	    display: table;
	    width: 100%;
	    background: #fff;
	    margin: 0;
	    box-sizing: border-box;
	}
	.header-row {
	    background: #8b8b8b;
	    color: #fff;
	}
	.row {
	    display: table-row;
	}
	.cell {
	    display: table-cell;
	    padding: 6px;
	    border-bottom: 1px solid #e5e5e5;
	    text-align: center;
	}
	.primary {
	    text-align: left;
	}
	input[type="radio"], input[type="checkbox"] {
	    display: none;
	}
	@media only screen and (max-width: 760px) {
	    body {
	        padding: 0;
	    }
	    #table {
	        display: block;
	        margin: 44px 0 0 0;
	    }
	    .caption {
	        position: fixed;
	        top: 0;
	        text-align: center;
	        height: 44px;
	        line-height: 44px;
	        z-index: 5;
	        border-bottom: 2px solid #999;
	    }
	    .row {
	        position: relative;
	        display: block;
	        border-bottom: 1px solid #ccc;
	    }
	    .header-row {
	        display: none;
	    }
	    .cell {
	        display: block;
	        border: none;
	        position: relative;
	        height: 45px;
	        line-height: 45px;
	        text-align: left;
	    }
	    .primary:after {
	        content:"";
	        display: block;
	        position: absolute;
	        right:20px;
	        top:18px;
	        z-index: 2;
	        width: 0;
	        height: 0;
	        border-top: 10px solid transparent;
	        border-bottom: 10px solid transparent;
	        border-right:10px solid #ccc;
	    }
	    .cell:nth-of-type(n+2) {
	        display: none;
	    }
	    input[type="radio"], input[type="checkbox"] {
	        display: block;
	        position: absolute;
	        z-index: 1;
	        width: 99%;
	        height: 100%;
	        opacity: 0;
	    }
	   ...