JSFiddle - React, Tailwind, and code Playground

by techgeeek

HTML

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">



    <!-- begin snippet: js hide: false -->
    
    <!-- language: lang-css -->
    
        
    
        	<div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="text-center">
                        Timetable
                    </h2>
                </div>
                <div id="no-more-tables">
                    <table class="col-sm-12 table-bordered table-striped table-condensed cf">
                		<thead class="cf">
                			<tr>
        						<th>      </th>
                				<th>Monday</th>
                				<th>Tuesday</th>
                				<th>Wednesday</th>
                				<th>Thursday</th>
                				<th>Friday</th>
                			</tr>
                		</thead>
                		<tbody>
                			<tr>
        						<td data-title="      ">07:45 |1| 08:35</td>
                				<td data-title="Monday">Lesson</td>
                				<td data-title="Tuesday">Lesson</td>
                				<td data-title="Wednesday">Lesson</td>
                				<td data-title="Thursday">Lesson</td>
                				<td data-title="Friday">Lesson</td>
                			</tr>
                			<tr>
        						<td data-title="      ">08:35 |2| 09:25</td>
                				<td data-title="Monday">Lesson</td>
                				<td data-title="Tuesday">Lesson</td>
                				<td data-title="Wednesday">Lesson</td>
                				<td data-title="Thursday">Lesson</td>
                				<td data-title="Friday">Lesson</td>
                			</tr>
                			<tr>
        						<td data-title="      ">09:30 |3| 10:20</td>
                				<td data-title="Monday">Lesson</td>
                				<td...

CSS

@media only screen and (max-width: 800px) {
        /* Force table to not be like tables anymore */
        #no-more-tables table,
        #no-more-tables thead,
        #no-more-tables tbody,
        #no-more-tables th,
        #no-more-tables td,
        #no-more-tables tr {
        display: block;
        }
         
        /* Hide table headers (but not display: none;, for accessibility) */
        #no-more-tables thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
        }
         
        #no-more-tables tr { border: 1px solid #ccc; }
          
        #no-more-tables td {
        /* Behave like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align:left;
        }
         
        #no-more-tables td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
        }
         
        /*
        Label the data
        */
        #no-more-tables td:before { content: attr(data-title); }
        }