JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<div id="report-holder" class="report-holder">
    <table class="report">
        <tbody>
            <tr>
                <th class="customer">Customer</th>
                <th class="date">Date</th>
                <th class="slm">Salesman</th>
                <th class="product"><span class="item-id">1024</span><span class="item-desc">PEELED TOMATOES 24/796 ML (796 ML)</span></th>
                <th class="product"><span class="item-id">1034</span><span class="item-desc">WHOLE CDN TOMATOES 24/796ML (796 ML)</span></th>
                <th class="product"><span class="item-id">1040</span><span class="item-desc">ITALIAN PEELED TOM 6/2.84 L (2.84 L)</span></th>
                <th class="product"><span class="item-id">1115</span><span class="item-desc">KTCHN RDY TOM 24/796ML (796 ML)</span></th>
                <th class="product"><span class="item-id">1116</span><span class="item-desc">SPICED DICED TOM 24/796ML (796 ML)</span></th>
            </tr>
            <tr class="odd">
                <td class="customer"><span>100307 METRO RICHELIEU INC</span><span>635 AVE. NEWTON, QUEBEC, QC</span></td>
                <td class="date">4 Feb 2014</td>
                <td class="slm">20</td>
                <td class="product">2</td>
                <td class="product">2</td>
                <td class="product">2</td>
                <td class="product">2</td>
                <td class="product">0</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

div.report-holder { margin: 30px 0px; width: 100%; overflow: auto; }

table.report { width: auto; }
table.report th { background: darkGrey; color: white; }
table.report tr.odd { background: white; }
table.report tr.even { background: #f7f7f7; }
table.report td, table.report th { padding: 1px 3px; }
table.report td span, table.report th span { display: block; }
table.report td.customer, table.report th.customer { width: 200px; text-align: left; }
table.report td.date, table.report th.date { width: 60px; text-align: left; }
table.report td.slm, table.report th.slm { width: 65px; text-align: center; }
table.report td.product, table.report th.product { width: 100px !important; text-align: center; }