JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script>
<div class="container">
<div id="ctl00_ContentPlaceHolder1_PnlDnb" style="overflow-x:scroll;">
    
        <div>
        <table class="mGrid" cellspacing="0" rules="all" border="1" id="ctl00_ContentPlaceHolder1_grdDnb" style="width:100%;border-collapse:collapse;">
            <tbody><tr>
                <th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdDnb','Sort$REGIONNAME')">Region</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdDnb','Sort$STATIONCODE')">Station</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdDnb','Sort$ACT_DATE_DEP')">Flight_Date</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdDnb','Sort$FLIGHT_NO')">Flight Number</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdDnb','Sort$TICKET_NO')">Ticket Number</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdDnb','Sort$PASSENGER_NAME')">Passenger Name</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdDnb','Sort$BKG_CLASS')">Booking Class</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdDnb','Sort$REASON_FOR_DNB')">Reason For DNB</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdDnb','Sort$ANY_TRANSFERS')">Any Transfers</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdDnb','Sort$OAL_CODE')">Airline Code</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdDnb','Sort$FIM_NO')">FIM No.</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$grdDnb','Sort$COMP_OFFERED')">Comp Offered</a></th><th...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectboxit.css');
body
{
    font-size:12px;
        line-height:16px;
}
.container
{
    width:1200px;
}
/* grid styles */
.mGrid {
width: 100%;
background-color: #fff;
border: solid 1px #525252;
border-collapse:collapse;
}
.mGrid td
{
    padding:4px 2px;
    border: solid 1px #c1c1c1;
    color: #000000;
    text-align: center;
    vertical-align:top;
}
.mGrid tr:hover
{
    background: #999999;
}
.mGrid td.AlignLeft
{
   text-align: left !important; 
}
.mGrid td.AlignRight
{
   text-align: right !important; 
}
.mGrid th {
padding: 6px 3px;
color: #fff;
background: #424242;
border-left: solid 1px #525252;
font-size: inherit;
vertical-align:top;
}
.mGrid th a 
{ color:#fff;
}
.mGrid th a:hover
{
    text-decoration:none;
}
.mGrid .alt
{
    background: #E6E6E6;
}
.mGrid .pgr
{
    background: #C0C0C0;
}
.mGrid .pgr table
{
margin: 2px auto;
width: auto;
}
.mGrid .pgr td
{
    border-width: 0;
    padding: 1px 3px 0 3px;
    font-weight: bold;
    color: #fff;
    background-color: #424242;
    vertical-align:middle;
}
.mGrid .pgr .btn
{
margin-left:0;
}
/* Set the width for SelectBoxIt small-dropdowns  */
.small-dropdown.selectboxit, .small-dropdown.selectboxit + .selectboxit-options
{
    text-align:left;
    width: 65px;
    min-width: 65px;    
}

JavaScript

$(function() {
    $('select').selectBoxIt({
        theme: "twitterbootstrap"
    });
});