JSFiddle - React, Tailwind, and code Playground

by chicagogrooves

HTML

<table id="todos">
  <thead>
    <tr>
        <td></td>
        <td>Mon</td>
        <td>Tue</td>
        <td>Wed</td>
        <td>Thu</td>
        <td>Fri</td>
        <td>Sat</td>
        <td>Sun</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="act_label">Mow Lawn</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="act_label">Workout</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="act_label">Check Bills</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="act_label">Call Mom</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="act_label">Pushups (15)</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>

<script src="//chicagogrooves.com/js/jquery.inlineedit.js"></script>

CSS

html, body { height: 100% } 
#todos{ width: 100%; height: 100% } /* capped by JS at device width */
thead { text-align: center; }
td { border: thin solid; width: 12% }
.act_label{ padding-left: 5px; width: 16% }
tr { height: 50px }
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>

JavaScript

$(function() {
  $('.act_label').inlineEdit();
});

// eliminate address bar on mobile
window.addEventListener('load', function(e) {
    setTimeout(function() { window.scrollTo(0, 1); }, 1);
}, false);

// cap height at window width - not currently working
 window.document.onresize = function() {
        var todos = document.getElementById('todos'); 
        var size = window.innerWidth + 'px'; 

        todos.style.height = size; 
    };