JSFiddle - React, Tailwind, and code Playground

by john_rock

HTML

<body>
<form method="post" action="LocalTaxReport.aspx" id="form1">
<div id="wrapper">
    <div id="container">
        <div id="centralContainer">
            <div id="mainContainer">
                <div id="contentHolderDiv" class="contentHolderDiv">
                    <div id="resultContainer" class="resultContainerDiv">
                        <div id="gridDiv" class="gridTableBorder">
                            <div>
                                <table class="resultGridTable" cellspacing="0" id="detailContentPlaceholder_grdLocalTaxReport"
                                    style="border-collapse: collapse;">
                                    <tr>
                                        <th scope="col">
                                            IsSummaryRow
                                        </th>
                                        <th scope="col">
                                            Associate
                                        </th>
                                        <th scope="col">
                                            My Amount
                                        </th>
                                        <th scope="col">
                                            Federal Withholding
                                        </th>
                                        <th scope="col">
                                            Social Security
                                        </th>
                                        <th scope="col">
                                            Medicaring
                                        </th>
                                        <th scope="col">
                                            State Tax
                                        </th>
                                        <th scope="col">
                                            County Tax
                                        </th>
                                        <th...

CSS

.gridTableBorder
   {
        overflow:scroll;
        border: 2px solid green;
   }

    /*GridView Tables*/
    .resultGridTable
    {
        table-layout: fixed; /*Needed along with word wrap */
    }

    .resultGridTable th
    {
        background-color: #A7A7A6;
        color: #ffffff;
        padding: 2px 5px 2px 5px;
        font: bold 9pt Arial;
        border: 1px solid red;
        word-wrap: break-word;
    }

    .resultGridTable td
    {
        padding: 0px 5px 0px 5px;
        font: normal 9pt Arial;
        word-wrap: break-word;
        border: 1px solid blue;
    }

JavaScript

$(document).ready(function () {


        //Width Setting
        var numberOfColumns = 16;
        $('.resultGridTable th, .resultGridTable td').each(function (i) {


            if (i % numberOfColumns == 0) {
                $(this).css('width', '1%');
            }

            if (i % numberOfColumns == 1) {
                $(this).css('width', '10%');
            }

            if (i % numberOfColumns == 2) {
                $(this).css('width', '9%');

            }

            if (i % numberOfColumns == 3) {
                $(this).css('width', '8%');
                $(this).css('background-color', 'orange');
            }

            if (i % numberOfColumns == 4) {
                $(this).css('width', '6%');
            }
            if (i % numberOfColumns == 5) {
                $(this).css('width', '8%');
            }
            if (i % numberOfColumns == 6) {
                $(this).css('width', '5%');
            }
            if (i % numberOfColumns == 7) {
                $(this).css('width', '5%');
            }
            if (i % numberOfColumns == 8) {
                $(this).css('width', '5%');
            }

            ///
            if (i % numberOfColumns == 9) {
                $(this).css('width', '7%');
            }
            if (i % numberOfColumns == 10) {
                $(this).css('width', '8%');
                $(this).css('background-color', 'orange');
            }

            if (i % numberOfColumns == 11) {
                $(this).css('width', '5%');
            }
            if (i % numberOfColumns == 12) {
                $(this).css('width', '5%');
            }

            if (i % numberOfColumns == 13) {
                $(this).css('width', '44%');
                $(this).css('background-color', 'yellow');
            }

            if (i % numberOfColumns == 14) {
                $(this).css('width', '0%');
            }

            if (i % numberOfColumns == 15) {
                $(this).css('width', '0%');
...