JSFiddle - React, Tailwind, and code Playground

by Ahmad Sharif

HTML

<div class="datagrid">
    <table class="film">
        <thead>
            <tr>
                <th colspan="2">Blablabla</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="2">
                    <div id="no-paging">&nbsp;</div>
                </td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td colspan="2">
                    <img width="20" height="20" alt="" src="/image/image_gallery?uuid=dd94064a-e21b-49e6-ad37-e1ccdd92929a&amp;groupId=12522&amp;t=1362057692814"
                    /><a href='mailto:[email protected]'>[email protected]</a>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <img width="20" height="20" alt="" src="/image/image_gallery?uuid=b76fdc77-6ea9-48fb-a5b6-270c54a81e12&amp;groupId=12522&amp;t=1362058133674"
                    /><a href="tel:1231234567">123-1234567</a>
                </td>
            </tr>
            <tr class="alt">
                <td>Blabla</td>
                <td>Blabla</td>
            </tr>
            <tr>
                <td>Blabla</td>
                <td>Blabla</td>
            </tr>
            <tr class="alt">
                <td>Blabla</td>
                <td>Blabla</td>
            </tr>
            <tr>
                <td>Blabla</td>
                <td>Blabla</td>
            </tr>
            <tr class="alt">
                <td>Blabla</td>
                <td>Blabla</td>
            </tr>
            <tr>
                <td>Blabla</td>
                <td>Blabla</td>
            </tr>
            <tr class="alt">
                <td>Blabla</td>
                <td>Blabla</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="datagrid">
    <table class="film">
        <thead>
            <tr>
                <th colspan="2">Blabla</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td...

CSS

.datagrid table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
}
.datagrid {
    font: normal 12px/150% Arial, Helvetica, sans-serif;
    background: #fff;
    margin: 1em 0;
    max-width:95%;
    overflow: hidden;
    border: 1px solid #8C8C8C;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width:95%;
}
.datagrid table td, .datagrid table th {
    padding: 3px 10px;
}
.datagrid table thead th {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #FF6600), color-stop(1, #FF751A));
    background:-moz-linear-gradient(center top, #FF6600 5%, #FF751A 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF6600', endColorstr='#FF751A');
    background-color:#FF6600;
    color:#FFFFFF;
    font-size: 15px;
    font-weight: bold;
    padding: 1em;
}
.datagrid table thead th:first-child {
    border: none;
}
.datagrid table tbody td {
    color: #707070;
    font-size: 14px;
    font-weight: normal;
}
.datagrid table tbody .alt td {
    background: #EBEBEB;
    color: #707070;
}
.datagrid table tbody td:first-child {
    border-left: none;
}
.datagrid table tbody tr:last-child td {
    border-bottom: none;
}
.datagrid table tfoot td div {
    border-top: 1px solid #8C8C8C;
    background: #EBEBEB;
}
.datagrid table tfoot td {
    padding: 0;
    font-size: 12px;
}
.datagrid table tfoot td div {
    padding: 2px;
}
.datagrid table tbody tr td img {
    margin: 0 0.2em;
    vertical-align: middle;
}
.datagrid td {
    display: none;
}

JavaScript

var $ = jQuery.noConflict(true);
    $(document).ready(function() {
        $('th').click(function() {
    var thetd =  $(this).parents('table').find('td');
                $('table  td').not(thetd).slideUp("fast");

            $(this).parents('table').find('td').slideToggle("fast");
        });
    });