JSFiddle - React, Tailwind, and code Playground

by adardesign

HTML

<div class="radius borderCCC"> 
<table class="prodData" width="100%" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>Make</th>
                    <th>Model</th>
                    <th>Description</th>
                    <th>Qty</th>
                    <th>Price</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Samsung</td>
                    <td>galaxy LCD screens</td>
                    <td>4.2 x 44 plactic / rubber LCD screen (Black)</td>
                    <td>50</td>
                    <td>$4,999</td>
                    <td><span class="delete"></span></td>
                </tr>
                <tr>
                    <td>Samsung</td>
                    <td>galaxy LCD screens</td>
                    <td>4.2 x 44 plactic / rubber LCD screen (Black)</td>
                    <td>50</td>
                    <td>$4,999</td>
                    <td><span class="delete"></span></td>

                </tr>
                <tr>
                    <td>Samsung</td>
                    <td>galaxy LCD screens</td>
                    <td>4.2 x 44 plactic / rubber LCD screen (Black)</td>
                    <td>50</td>
                    <td>$4,999</td>
                    <td><span class="delete"></span></td>                    
                </tr>
                    
            </tbody>
        </table>
</div>

CSS

.radius{ border-radius:5px; -webkit-border-radius:5px;}
.borderCCC{ border:1px solid #ccc;}



table.prodData{border-radius:5px;  -webkit-border-radius:5px; border-collapse: collapse;}
table.prodData thead{
border-radius:5px;  -webkit-border-radius:5px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #efefef 58%, #e6e7e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(58%,#efefef), color-stop(100%,#e6e7e8));
background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 58%,#e6e7e8 100%);
background: -o-linear-gradient(top, #ffffff 0%,#efefef 58%,#e6e7e8 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#efefef 58%,#e6e7e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e7e8',GradientType=0 );
background: linear-gradient(top, #ffffff 0%,#efefef 58%,#e6e7e8 100%);
    
}
table.prodData thead th{ position:relative; padding:10px 15px; font-size:18px; text-shadow:0 1px 0 #fff; line-height:15px; vertical-align:bottom; border-right:1px solid #ccc; font-weight:normal; text-align:left;}
table.prodData thead th:first-child:before{ content:" "; position:absolute; top:-1px; left:-1px; width:15px; height:15px; border-left:1px solid #ccc; border-top:1px solid #ccc; -webkit-border-radius:5px 0px 0px;}
table.prodData thead th:last-child:after{ content:" "; position:absolute; top:-1px; right:-1px; width:15px; height:15px; border-right:1px solid #ccc; border-top:1px solid #ccc; -webkit-border-radius:0px 5px 0px 0px;}
table.prodData thead th:last-child{border-right:none; }
table.prodData tbody td{text-align:left; padding:5px 15px; border-bottom:1px solid #ccc; border-right:1px solid #ccc;}
table.prodData tbody tr:last-child td{border-bottom:none;}
table.prodData tbody td:last-child{ width:30px; border-right:none;}