5+ CSS Accordion Table Examples

This post contains a total of 5+ Hand-Picked CSS Accordion Table Examples with Source Code. All these Accordion Tables are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

Click a Code to Copy it.

CSS Accordion table examples

1. By Sayan Chakrabarti

Made by Sayan Chakrabarti. A simple Accordion Table made with css. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
</head>
<body>
  <table class='table'>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr data-toggle="collapse" data-target="#info-row-1">
    <td>Saurav</td>
    <td>44</td>
    <td>Kolkata</td>
  </tr>
  <tr id='info-row-1' class='collapse'>
    <td colspan='3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id lacinia sapien, at condimentum lacus. Nunc eu dignissim eros. Nullam pellentesque egestas turpis ac iaculis. Phasellus viverra, est vel fringilla pretium, ante tellus sodales est, a aliquet nunc dui quis velit. In aliquet enim et lectus fermentum vulputate. Cras sagittis, ex sit amet vulputate pellentesque, massa sem congue felis, rhoncus egestas nulla arcu et tellus. Praesent sit amet congue enim</td>
  </tr>
  
  <tr data-toggle="collapse" data-target="#info-row-2">
    <td>Sachin</td>
    <td>43</td>
    <td>Mumbai</td>
  </tr>
  <tr id='info-row-2' class='collapse'>
    <td colspan='3'>Morbi aliquam ullamcorper tellus vel lobortis. Fusce consectetur, tellus at accumsan vestibulum, orci dolor condimentum orci, vitae semper eros leo vitae lorem. Nullam luctus porta fringilla. In hac habitasse platea dictumst. Donec enim felis, commodo eget sapien id, feugiat mattis ipsum. Pellentesque tempus nulla dignissim tellus vestibulum mattis. Nulla at semper eros. Morbi fringilla porttitor iaculis. Fusce nec magna tellus. </td>
  </tr>
</table>
</body>
</html>

2. By Vladimir Tikunov

Made by Vladimir Tikunov. Accordion Table with Button, clicking the button opens the rest of the content. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
</head>
<body>
  <table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">A</th>
      <th scope="col">B</th>
      <th scope="col">C</th>
      <th><button class="btn" data-toggle="collapse" data-target=".multi-collapse">Something</button></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>23.05.2018</td>
      <td>Otto</td>
      <td>A</td>
      <td><button class="btn" data-toggle="collapse" data-target="#1">A</button></td>
    </tr>
    <tr class="collapse multi-collapse" id="1">
      <td colspan="5">
        <div class="card card-body">
          A.
        </div>
      </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>24.05.2018</td>
      <td>Bismark</td>
      <td>A</td>
      <td><button class="btn" data-toggle="collapse" data-target="#2">A</button></td>
    </tr>
    <tr class="collapse multi-collapse" id="2">
      <td colspan="5">
        <div class="card card-body">
          A.
        </div>
      </td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>26.05.2018</td>
      <td>Matilda</td>
      <td>A</td>
      <td><button class="btn" data-toggle="collapse" data-target="#3">A</button></td>
    </tr>
    <tr class="collapse multi-collapse" id="3">
      <td colspan="5">
        <div class="card card-body">
          A.
        </div>
      </td>
    </tr>
  </tbody>
</table>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
</body>
</html>

3. By Amir Hafizovic

Made by Amir Hafizovic. Nested Accordion Table. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  
<style>
.panel-group .panel-heading + .panel-collapse > .panel-body {
  border: 1px solid #ddd;
}
.panel-group,
.panel-group .panel,
.panel-group .panel-heading,
.panel-group .panel-heading a,
.panel-group .panel-title,
.panel-group .panel-title a,
.panel-group .panel-body,
.panel-group .panel-group .panel-heading + .panel-collapse > .panel-body {
  border-radius: 2px;
  border: 0;
}
.panel-group .panel-heading {
  padding: 0;
}
.panel-group .panel-heading a {
  display: block;
  background: #668bb1;
  color: #ffffff;
  padding: 15px;
  text-decoration: none;
  position: relative;
}
.panel-group .panel-heading a.collapsed {
  background: #eeeeee;
  color: inherit;
}
.panel-group .panel-heading a:after {
  content: '-';
  position: absolute;
  right: 20px;
  top:5px;
  font-size:30px;
}
.panel-group .panel-heading a.collapsed:after {
  content: '+';
}
.panel-group .panel-collapse {
  margin-top: 5px !important;
}
.panel-group .panel-body {
  background: #ffffff;
  padding: 15px;
}
.panel-group .panel {
  background-color: transparent;
}
.panel-group .panel-body p:last-child,
.panel-group .panel-body ul:last-child,
.panel-group .panel-body ol:last-child {
  margin-bottom: 0;
}

.current_booking {
  color:light-blue;
}
.new_booking {
  color:green;
}
.cancel_booking {
  color:red;
}
</style>
</head>
<body>
  <div class="container">
  <h4>Checkout Summary</h4>
  <div class="panel-group" id="accordion">

    <!-- FIRST PANEL -->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
            3 x nights in Moomba (  05-10-2019 ~ 07-10-2019  )
          </a>
        </h4>
      </div><!--/.panel-heading -->
      <div id="collapseOne" class="panel-collapse collapse">
        <div class="panel-body">

          <!-- nested -->


          <div class="panel-group" id="nested">

            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseOne1">
                    05-10-2019 Camp change from Jackson to Moomba
                  </a>
                </h4>
              </div><!--/.panel-heading -->
              <div id="nested-collapseOne1" class="panel-collapse collapse">
                <div class="panel-body">
                  <!--Table-->
                  <table id="tablePreview" class="table">
                    <!--Table head-->
                    <thead>
                      <tr>
                        <th>Status</th>
                        <th>Date</th>
                        <th>Camp</th>
                      </tr>
                    </thead>
                    <!--Table head-->
                    <!--Table body-->
                    <tbody>
                      <tr>
                        <td>Current</td>
                        <td>05-10-2019</td>
                        <td>Jackson</td>
                      </tr>
                      <tr>
                        <td class="new_booking">New</td>
                        <td>05-10-2019</td>
                        <td>Moomba</td>
                      </tr>
                      <tr>
                        <td class="cancel_booking">Cancel</td>
                        <td>05-10-2019</td>
                        <td>Jackson</td>
                      </tr>
                    </tbody>
                    <!--Table body-->
                  </table>
                  <!--Table-->
                </div><!--/.panel-body -->
              </div><!--/.panel-collapse --> 
            </div><!-- /.panel --> 

            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseTwo2">
                    06-10-2019 Camp change from Jackson to Moomba
                  </a>
                </h4>
              </div><!--/.panel-heading -->
              <div id="nested-collapseTwo2" class="panel-collapse collapse">
                <div class="panel-body">
                  <!--Table-->
                  <table id="tablePreview" class="table">
                    <!--Table head-->
                    <thead>
                      <tr>
                        <th>Status</th>
                        <th>Date</th>
                        <th>Camp</th>
                      </tr>
                    </thead>
                    <!--Table head-->
                    <!--Table body-->
                    <tbody>
                      <tr>
                        <td>Current</td>
                        <td>06-10-2019</td>
                        <td>Jackson</td>
                      </tr>
                      <tr>
                        <td class="new_booking">New</td>
                        <td>06-10-2019</td>
                        <td>Moomba</td>
                      </tr>
                      <tr>
                        <td class="cancel_booking">Cancel</td>
                        <td>06-10-2019</td>
                        <td>Jackson</td>
                      </tr>
                    </tbody>
                    <!--Table body-->
                  </table>
                  <!--Table-->
                </div><!--/.panel-body -->
              </div><!--/.panel-collapse -->
            </div><!-- /.panel -->

            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseThree3">
                    07-10-2019 Camp change from Jackson to Moomba
                  </a>
                </h4>
              </div><!--/.panel-heading -->
              <div id="nested-collapseThree3" class="panel-collapse collapse">
                <div class="panel-body">
                  <!--Table-->
                  <table id="tablePreview" class="table">
                    <!--Table head-->
                    <thead>
                      <tr>
                        <th>Status</th>
                        <th>Date</th>
                        <th>Camp</th>
                      </tr>
                    </thead>
                    <!--Table head-->
                    <!--Table body-->
                    <tbody>
                      <tr>
                        <td>Current</td>
                        <td>07-10-2019</td>
                        <td>Jackson</td>
                      </tr>
                      <tr>
                        <td class="new_booking">New</td>
                        <td>07-10-2019</td>
                        <td>Moomba</td>
                      </tr>
                      <tr>
                        <td class="cancel_booking">Cancel</td>
                        <td>07-10-2019</td>
                        <td>Jackson</td>
                      </tr>
                    </tbody>
                    <!--Table body-->
                  </table>
                  <!--Table-->
                </div><!--/.panel-body -->
              </div><!--/.panel-collapse -->
            </div><!-- /.panel -->
          </div><!-- /.panel-group -->


          <!-- nested -->


        </div><!--/.panel-body -->
      </div><!--/.panel-collapse -->
    </div><!-- /.panel -->

    <!--- end first panel --->
    
    <!-- Second PANEL -->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo2">
            2 x nights in Ballera (  08-10-2019 ~ 09-10-2019  )
          </a>
        </h4>
      </div><!--/.panel-heading -->
      <div id="collapseTwo2" class="panel-collapse collapse">
        <div class="panel-body">

          <!-- nested -->


          <div class="panel-group" id="nested">

            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseOne11">
                    08-10-2019 Camp change from Jackson to Moomba
                  </a>
                </h4>
              </div><!--/.panel-heading -->
              <div id="nested-collapseOne11" class="panel-collapse collapse">
                <div class="panel-body">
                  <!--Table-->
                  <table id="tablePreview" class="table">
                    <!--Table head-->
                    <thead>
                      <tr>
                        <th>Status</th>
                        <th>Date</th>
                        <th>Camp</th>
                      </tr>
                    </thead>
                    <!--Table head-->
                    <!--Table body-->
                    <tbody>
                      <tr>
                        <td>Current</td>
                        <td>08-10-2019</td>
                        <td>Jackson</td>
                      </tr>
                      <tr>
                        <td class="new_booking">New</td>
                        <td>08-10-2019</td>
                        <td>Ballera</td>
                      </tr>
                      <tr>
                        <td class="cancel_booking">Cancel</td>
                        <td>08-10-2019</td>
                        <td>Jackson</td>
                      </tr>
                    </tbody>
                    <!--Table body-->
                  </table>
                  <!--Table-->
                </div><!--/.panel-body -->
              </div><!--/.panel-collapse --> 
            </div><!-- /.panel --> 

            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseTwo22">
                    09-11-2019 Camp change from Jackson to Ballera
                  </a>
                </h4>
              </div><!--/.panel-heading -->
              <div id="nested-collapseTwo22" class="panel-collapse collapse">
                <div class="panel-body">
                  <!--Table-->
                  <table id="tablePreview" class="table">
                    <!--Table head-->
                    <thead>
                      <tr>
                        <th>Status</th>
                        <th>Date</th>
                        <th>Camp</th>
                      </tr>
                    </thead>
                    <!--Table head-->
                    <!--Table body-->
                    <tbody>
                      <tr>
                        <td>Current</td>
                        <td>09-11-2019</td>
                        <td>Jackson</td>
                      </tr>
                      <tr>
                        <td class="new_booking">New</td>
                        <td>09-11-2019</td>
                        <td>Ballera</td>
                      </tr>
                      <tr>
                        <td class="cancel_booking">Cancel</td>
                        <td>09-11-2019</td>
                        <td>Jackson</td>
                      </tr>
                    </tbody>
                    <!--Table body-->
                  </table>
                  <!--Table-->
                </div><!--/.panel-body -->
              </div><!--/.panel-collapse -->
            </div><!-- /.panel -->

          </div><!-- /.panel-group -->


          <!-- nested -->


        </div><!--/.panel-body -->
      </div><!--/.panel-collapse -->
    </div><!-- /.panel -->

    <!--- end first panel --->

    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
            2 x Flights
          </a>
        </h4>
      </div><!--/.panel-heading -->
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">

          <!-- nested -->


          <div class="panel-group" id="nested">

            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseOne">
                    08-10-2019 Flight QF12344 from Moomba to Ballera
                  </a>
                </h4>
              </div><!--/.panel-heading -->
              <div id="nested-collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                   <!--Table-->
                  <table id="tablePreview" class="table">
                    <!--Table head-->
                    <thead>
                      <tr>
                        <th>Status</th>
                        <th>Date</th>
                        <th>Flight</th>
                        <th>From</th>
                        <th>To</th>
                        <th>Departure</th>
                        <th>Arrival</th>
                        <th>Checkin</th>
                      </tr>
                    </thead>
                    <!--Table head-->
                    <!--Table body-->
                    <tbody>
                      <tr>
                        <td class="new_booking">New</td>
                        <td>08-11-2019</td>
                        <td>QF12344</td>
                        <td>Moomba</td>
                        <td>Ballera</td>
                        <td>09:00</td>
                        <td>10:00</td>
                        <td>08:30</td>
                      </tr>
                    </tbody>
                    <!--Table body-->
                  </table>
                  <!--Table-->
                </div><!--/.panel-body -->
              </div><!--/.panel-collapse --> 
            </div><!-- /.panel --> 

            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseTwo">
                    10-10-2019 Flight AZ12345 from Ballera to Adelaide
                  </a>
                </h4>
              </div><!--/.panel-heading -->
              <div id="nested-collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                   <!--Table-->
                  <table id="tablePreview" class="table">
                    <!--Table head-->
                    <thead>
                      <tr>
                        <th>Status</th>
                        <th>Date</th>
                        <th>Flight</th>
                        <th>From</th>
                        <th>To</th>
                        <th>Departure</th>
                        <th>Arrival</th>
                        <th>Checkin</th>
                      </tr>
                    </thead>
                    <!--Table head-->
                    <!--Table body-->
                    <tbody>
                      <tr>
                        <td>Current</td>
                        <td>10-11-2019</td>
                        <td>QF76644</td>
                        <td>Moomba</td>
                        <td>Adelaide</td>
                        <td>10:30</td>
                        <td>13:30</td>
                        <td>10:00</td>
                      </tr>
                      <tr>
                        <td class="new_booking">New</td>
                        <td>10-11-2019</td>
                        <td>QF12344</td>
                        <td>Ballera</td>
                        <td>Adelaide</td>
                        <td>11:00</td>
                        <td>14:00</td>
                        <td>10:30</td>
                      </tr>
                      <tr>
                        <td class="cancel_booking">Cancel</td>
                        <td>10-11-2019</td>
                        <td>QF76644</td>
                        <td>Moomba</td>
                        <td>Adelaide</td>
                        <td>10:30</td>
                        <td>13:30</td>
                        <td>10:00</td>
                      </tr>
                    </tbody>
                    <!--Table body-->
                  </table>
                  <!--Table-->
                </div><!--/.panel-body -->
              </div><!--/.panel-collapse -->
            </div><!-- /.panel -->

          </div><!-- /.panel-group -->

          <!-- nested -->

        </div><!--/.panel-body -->
      </div><!--/.panel-collapse -->
    </div><!-- /.panel -->

    <!-- END SECOND PANEL -->


  </div><!-- /.panel-group -->

</div><!-- /.container -->
  
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

</body>
</html>

4. By Ravi Prasad

Made by Ravi Prasad. Basic CSS Accordion table, its responsive and works on multiple screen sizes. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
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;

	 }

	 .caption {
	 	display: block;
	 	width: 100%;
	 	background: #64e0ef;
	 	height: 55px;
	 	padding-left: 10px;
	 	color: #fff;
	 	font-size: 20px;
	 	line-height: 55px;
	 	text-shadow: 1px 1px 1px rgba(0,0,0,.3);
	 	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;
		}
    
    input[type="radio"]:checked,
		input[type="checkbox"]:checked {
		  z-index: -1;
		}

		input[type="radio"]:checked ~ .cell,
		input[type="checkbox"]:checked ~ .cell {
			display: block;

			border-bottom: 1px solid #eee; 
		}

		input[type="radio"]:checked ~ .cell:nth-of-type(n+2),
		input[type="checkbox"]:checked ~ .cell:nth-of-type(n+2) {
			
			background: #e0e0e0;
		}

		input[type="radio"]:checked ~ .cell:nth-of-type(n+2):before,
		input[type="checkbox"]:checked ~ .cell:nth-of-type(n+2):before {
			content: attr(data-label);

			display: inline-block;
			width: 60px;
			background: #999;
			border-radius: 10px;
			height: 20px;
			margin-right: 10px;
			font-size: 12px;
			line-height: 20px;
			text-align: center;
			color: white;

		}

		input[type="radio"]:checked ~ .primary,
		input[type="checkbox"]:checked ~ .primary  {
			border-bottom: 2px solid #999;
		}

		input[type="radio"]:checked ~ .primary:after,
		input[type="checkbox"]:checked ~ .primary:after {
	 		position: absolute;
			right:18px;
			top:22px;
			border-right: 10px solid transparent;
			border-left: 10px solid transparent; 
			border-top:10px solid #ccc;
			z-index: 2;
		}
	}
</style>
</head>
<body>
  <div class="caption">Inventory</div>	
<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"><a href="">5 Speed</a></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" data-label="Exterior">Twilight Blue Metallic</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 Forester</span>
    <span class="cell" data-label="Exterior">Ice Silver Metallic</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">Auto</span>
  </div>
</div>
</body>
</html>
 

5. By Rick Stanley

Made by Rick Stanley. Another simple responsive accordion table. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
/* General */
@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
body {
  font-family: "Lato", sans-serif;
}
* {
  box-sizing: border-box;
}
.wrapper {
  width: 90%;
  margin: 0 auto;
  max-width: 720px;
  border-radius: 10px;
  box-shadow: 1px 1px 12px 0 rgba(0, 0, 0, 0.123456789);
}

.accordion {
  position: relative;
  width: 100%;
  margin-bottom: 2px;
  perspective: 1em;
  perspective-origin: top;
}

.accordion input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.accordion label {
  cursor: pointer;
  font-weight: bold;
  background-color: #f80020;
  color: white;
  padding: 0 0 0 1em;
  display: block;
  user-select: none;
  line-height: 2.5;
  transition: border-radius 0.3s;
  position: relative;
}

.accordion label:hover {
  background-color: #dc0621;
}

.accordion label::after {
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 560"><path fill="#fff" d="M480 344.181L268.869 131.889c-15.756-15.859-41.3-15.859-57.054 0-15.754 15.857-15.754 41.57 0 57.431l237.632 238.937c8.395 8.451 19.562 12.254 30.553 11.698 10.993.556 22.159-3.247 30.555-11.698L748.186 189.32c15.756-15.86 15.756-41.571 0-57.431s-41.299-15.859-57.051 0L480 344.181z"/></svg>');
  position: absolute;
  font-size: 10px;
  top: 50%;
  transform: translateY(-50%);
  right: 1em;
  height: 20px;
  background-color: #f80020;
  border-radius: 50em;
  background-position: center;
  background-repeat: no-repeat;
  width: 20px;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.accordion input:checked ~ label::after {
  transform: rotate(180deg) translateY(50%);
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
}
.accordion input:checked ~ label {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #df001c;
}
.accordion input:checked ~ .table-container {
  max-height: 100em;
}

.accordion .table-container {
  overflow: hidden;
  max-height: 0px;
  transition: max-height 0.3s ease-in-out;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* The star */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  color: #7c7c7c;
}

tr:nth-child(odd) {
  background-color: #e9e9e9;
}

tr:hover {
  background-color: #f1f1f1;
}
tr td:first-child {
  width: 35%;
}
tr td:last-child {
  width: 65%;
}
td {
  padding: 0.5em;
}

@media only screen and (max-width: 767px) {
  tr td:first-child {
    display: none;
  }
  tr td span {
    display: block;
  }
  tr td::before {
    content: attr(data-label);
    display: inline-block;
    font-size: 80%;
    padding-bottom: 2.5px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
  }
}
</style>
</head>
<body>
  <div class="wrapper">
  <div class="accordion">
    <input type="checkbox" id="table-1" checked>
    <label for="table-1">DADOS GERAIS</label>
    <div class="table-container">
      <table>
        <tr>
          <td>Sistema Operacional</td>
          <td data-label="Sistema Operacional"><span>Android 6.0.1 Marshmallow</span></td>
        </tr>
        <tr>
          <td>Processador</td>
          <td data-label="Processador"><span>8895 Exynos 9.4X 2.3 GHz + 4X 1.7 GHz</span></td>
        </tr>
        <tr>
          <td>Quantidade de Núcleos</td>
          <td data-label="Quantidade de Núcleos"><span>Quad core</span></td>
        </tr>
        <tr>
          <td>RAM</td>
          <td data-label="RAM"><span>3 GB</span></td>
        </tr>
        <tr>
          <td>Memória</td>
          <td data-label="Memória"><span>64 GB</span></td>
        </tr>
        <tr>
          <td>Memória Expansível</td>
          <td data-label="Memória Expansível"><span>até 256 GB</span></td>
        </tr>
        <tr>
          <td>Conexão</td>
          <td data-label="Conexão"><span>3 GB</span></td>
        </tr>
        <tr>
          <td>Dual SIM</td>
          <td data-label="Dual SIM"><span>Sim</span></td>
        </tr>
        <tr>
          <td>Resistência a água</td>
          <td data-label="Resistência a água"><span>Sim</span></td>
        </tr>
      </table>
    </div>
  </div>
</div>
</body>
</html>