JSFiddle - React, Tailwind, and code Playground

by mysphyt

HTML

<table class="scheduleGrid">
    <caption>Master Schedule</caption>
    <thead>
        <tr><th></th><th>M</th><th>T</th><th>W</th><th>Th</th><th>F</th></tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="6">
            </td>
        </tr>
    </tfoot>

    <tbody>

        <tr>
            <td>9:00</td>
            <td>
                <div class="tutors"><span class="sechead">Tutors</span><ul>
                        <li>Tutor</li>
                        <li>Tutor</li>
                        <li>Tutor</li>
                        <li>Tutor</li>
                        <li>Tutor</li>
                        </ul></div><div class="sink"><div class="facstaff">

                        <div class="Faculty"><span class="sechead">Faculty</span>
                            <ul>
                                <li class="Faculty">Faculty</li></ul></div>
                        <div class="Staff"><span class="sechead">Staff</span>
                            <ul>
                                <li class="Staff">Staff</li></ul></div>
            </div></div></td>
            <td>
                <div class="tutors"><span class="sechead">Tutors</span><ul>
                        <li>Tutor</li>
                        <li>Tutor</li>
                        <li>Tutor</li>
                        <li>Tutor</li>
                        </ul></div><div class="sink"><div class="facstaff">

                        <div class="Faculty"><span class="sechead">Faculty</span>
                            <ul>
                                <li class="Faculty">Faculty</li></ul></div>
                        <div class="Staff"><span class="sechead">Staff</span>
                            <ul>
                                <li class="Staff">Staff</li></ul></div>
            </div></div></td>
            <td>
                <div class="tutors"><span class="sechead">Tutors</span><ul>
                        <li>Tutor</li>
                        <li>Tutor</li>
    ...

CSS

body { 
    margin: 0px;
    padding: 0px;
    font-family: Century Gothic, Avant Garde, Arial, Helvetica, sans-serif;
    font-size: 85%;
    color: #555;
    background: #fff;
}

a img { border: none; }
p, h1, h2, h3, h4, h5, h6, h7, ul, small, blockquote { margin-top: 0px; margin-bottom: 18px; }
p, li, li li { line-height: 160%; }
h1 { font-size: 1.7em; padding-bottom: 5px; border-bottom: 2px #ccc solid; }
h1 a { color: #036; text-decoration: none; }
h2 { font-size: 1.4em; color: #036; font-weight:normal; }
small { font-size: 0.9em; line-height: 140%; }
a { color: #333; }
a:hover { color: #555; }
em { font-weight: bold; font-style: normal; }


ul {
    list-style: none;
    padding-left: 6px;
}

.tutor {
    border-radius: 6px;
    background: #ddd;
    color: #777;
    margin: 2px;
    padding: 2px;
    position: relative;
    top: 0;
}

.Faculty {
    border-radius: 6px;
    margin: 2px;
    padding: 2px;
    background: #ACF;
}

.Staff {
    background: #CFC;
    border-radius: 6px;
    margin: 2px;
    padding: 2px;
}

div.facstaff {
    position: relative;
    bottom: 0;
}

table.scheduleGrid {
    background: #868686;
    border-radius: 6px;
    color: #fff;
    margin: auto;
}

table.scheduleGrid td:first-child {
    background: inherit;
    color: inherit;
}

table.scheduleGrid tr {
    position: relative;
}

table.scheduleGrid td {
    background: #FFF;
    color: #555;
    border-radius: 6px;
    margin: 2px;
    height: 100%;
}

table caption {
    text-align: center;
    background: #003466;
    border-radius: 6px;
}

JavaScript

$(document).ready(function () {
    $('#clickme').click(function () {
    $('.scheduleGrid').ready(function () {
        $('div.facstaff').each(function () { 
            $(this).height(Math.max.apply(null, $(this).parents('tr').find('div.facstaff').map(function() { 
                return $(this).height(); 
            }).get()));
        });
        $('div.tutors').each(function () { 
            $(this).height(Math.max.apply(null, $(this).parents('tr').find('div.tutors').map(function() { 
                return $(this).height(); 
            }).get()));

        });
        $('div.tutors').each(function () { $(this).height($(this).height() + 10) });
    });
    });
});