JSFiddle - React, Tailwind, and code Playground

by raam86

HTML

<div style="margin: 0 auto; text-align: center;">
    <table class="common2">
        <thead>
        <tr>
            <th colspan="12">Title</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td style="text-align: left; width: 150px;">Answer Options</td>
            <td style="text-align: center;">1</td>
            <td style="text-align: center;">2</td>
            <td style="text-align: center;">3</td>
            <td style="text-align: center;">4</td>
            <td style="text-align: center;">5</td>
            <td style="text-align: center;">6</td>
            <td style="text-align: center;">7</td>
            <td style="text-align: center;">8</td>
            <td style="text-align: center;">9</td>
            <td style="text-align: center;">10</td>
            <td style="text-align: center;">11+</td>
        </tr>
        <tr>
            <td style="text-align: left; width: 150px;">Response Count</td>
            <td style="text-align: center;">2</td>
            <td style="text-align: center;">0</td>
            <td style="text-align: center;">0</td>
            <td style="text-align: center;">0</td>
            <td style="text-align: center;">1</td>
            <td style="text-align: center;">0</td>
            <td style="text-align: center;">0</td>
            <td style="text-align: center;">0</td>
            <td style="text-align: center;">0</td>
            <td style="text-align: center;">0</td>
            <td style="text-align: center;">1</td>
        </tr>
        </tbody>
    </table>
</div>

CSS

.common2 table{
width:90%;
}

.common2 
    {
        
        border: solid #E6E6E6 1px;
        margin: 0 auto;
        padding: 0;
        border-spacing: 0px;
        /* border-collapse: collapse; */
    }

    .common2 td 
    {
        padding: 6px;
        border: solid #E6E6E6 1px;
    }

    .common2 th 
    {
        color: #fff;
        font-weight: bold;
        text-align: center;
        border: solid #E6E6E6 1px;
        background-color: #1A1A1C;
        padding: 8px;
        font-size: 14.5px;
    }

    .common2 th.highlighed
    {
        color: #fff;
        font-weight: bold;
        text-align: center;
        border: 0px solid #DBDBDB;
        background-color: #666666;
        padding: 6px 10px;
    }   



.common2 tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;

}



.common tr:last-child td:last-child {
    -moz-border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}

    .common2 tr:nth-child(even) 
    {
        background-color: #E8E8E8; /*#E7E9E8; /*#D6D8D7;*/
        position: relative;
    }



    .common2 td.stickOut
    {
        background-color: #DDEAFA; /*#DBAFAF;*/
        position: relative;
        font-weight: bold;
        border: solid #DBDBDB 1px;

    }



    .common2 td.head
    {
       background-color: #25328C; /* #4F4F4F; */
        text-align: center;
        border: 1px solid #25328C;
        padding: 3px;
        font-weight: bold;
        color: #fff;
        padding: 4px 10px;
        height: 35px;

        /* IE10 Consumer Preview */ 
        background-image: -ms-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);

        /* Mozilla Firefox */ 
        background-image: -moz-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);

        /* Opera */ 
        background-image: -o-linear-gradient(bottom, #2C3C92 0%, #25328C 100%);

        /* Webkit (Safari/Chrome 10) */ 
   ...