JSFiddle - React, Tailwind, and code Playground

by venkateshwar

HTML

<div class="vehiclediv">
    <table id="vehicletable">
        <thead>
            <tr id="vehicles">
                <th></th>
                <th id="vehicles">Bike</th>
                <th id="vehicles">Car</th>
                <th id="vehicles">Truck</th>
            </tr>
        </thead>
        <tbody id="scrolling">
            <tr id="vehicles">
                <td id="vehicles">Fuel Eco.</td>
                <td id="vehicles">&infin;</td>
                <td id="vehicles">25MPG</td>
                <td id="vehicles">16MPG</td>
            </tr>
            <tr id="vehicles">
                <td id="vehicles">Color</td>
                <td id="vehicles">Pink</td>
                <td id="vehicles">Red</td>
                <td id="vehicles">Black</td>
            </tr>
            <tr id="vehicles">
                <td id="vehicles">Cost</td>
                <td id="vehicles">$500</td>
                <td id="vehicles">$18K</td>
                <td id="vehicles">$22K</td>
            </tr>
            <!-- -->
            <tr id="vehicles">
                <td id="vehicles">Cost</td>
                <td id="vehicles">$500</td>
                <td id="vehicles">$18K</td>
                <td id="vehicles">$22K</td>
            </tr>
            <tr id="vehicles">
                <td id="vehicles">Cost</td>
                <td id="vehicles">$500</td>
                <td id="vehicles">$18K</td>
                <td id="vehicles">$22K</td>
            </tr>
            <tr id="vehicles">
                <td id="vehicles">Cost</td>
                <td id="vehicles">$500</td>
                <td id="vehicles">$18K</td>
                <td id="vehicles">$22K</td>
            </tr>
            <tr id="vehicles">
                <td id="vehicles">Cost</td>
                <td id="vehicles">$500</td>
                <td id="vehicles">$18K</td>
                <td id="vehicles">$22K</td>
            </tr>
            <tr id="vehicles">
                <td...

CSS

table#vehicletable {
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    width: 640px;
    /* Table reset stuff */
    border-collapse: collapse;
    border-spacing: 0;
}
tbody#scrolling {
    height: 120px;
    overflow: auto;
    display: block;
}
td#vehicles, th#vehicles {
    border: 0 none;
    height: 30px;
}
th#vehicles {
    /* Gradient Background */
    background: linear-gradient(#333 0%, #444 100%);
    color: #FFF;
    font-weight: bold;
    height: 40px;
}
td#vehicles {
    background: #FAFAFA;
    text-align: center;
}
/* Zebra Stripe Rows */
 tr#vehicles:nth-child(even) td#vehicles {
    background: #EEE;
}
tr#vehicles:nth-child(odd) td#vehicles {
    background: #FDFDFD;
}
/* First-child blank cells! */
 tr#vehicles td#vehicles:first-child, tr#vehicles th#vehicles:first-child {
    background: none;
    font-style: italic;
    font-weight: bold;
    font-size: 14px;
    text-align: right;
    padding-right: 10px;
    width: 80px;
}
/* Add border-radius to specific cells! */
 tr#vehicles:first-child th#vehicles:nth-child(2) {
    border-radius: 5px 0 0 0;
}
tr#vehicles:first-child th#vehicles:last-child {
    border-radius: 0 5px 0 0;
}
/*****************************************/
 table {
    width:100%;
}
thead {
    display: table;
    float: left;
    width: 100%;
}
thead th {
    text-align: center;
}
tbody {
    float: left;
    width: 100%;
}
tbody tr {
    display: table;
    width: 100%;
}
th, td {
    width: 25%;
}