JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table formatTable hoverTable TicketLists TechTickets">
    <thead>
        <tr class="hidden-xs">
            <th class="hidden-sm">
                #
            </th>
            <th class="hidden-xs">
                Opened
            </th>
            <th>
                Owned By
            </th>
            <th>
                Category
            </th>
            <th class="notesColumn">
                Opening Note
            </th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td class="hidden-sm hidden-xs">
            1
        </td>
        <td class="hidden-xs">
            01/01/12
        </td>
        <td style="white-space: nowrap">
            Daniel
        </td>
        <td>
            Test
        </td>
        <td class="notesColumn">
            This note is just a test.  I want this column to be wider than the other columns.  This is the notes column.
        </td>
    </tr>
     <tr>
        <td class="hidden-sm hidden-xs">
            1
        </td>
        <td class="hidden-xs">
            01/01/12
        </td>
        <td style="white-space: nowrap">
            Daniel
        </td>
        <td>
            Test
        </td>
        <td class="notesColumn">
            This note is just a test.  I want this column to be wider than the other columns.  This is the notes column.
        </td>
    </tr>
        <tr>
        <td class="hidden-sm hidden-xs">
            1
        </td>
        <td class="hidden-xs">
            01/01/12
        </td>
        <td style="white-space: nowrap">
            Daniel
        </td>
        <td>
            Test
        </td>
        <td class="notesColumn">
            This note is just a test.  I want this column to be wider than the other columns.  This is the notes column.
        </td>
    </tr>
        <tr>
        <td class="hidden-sm hidden-xs">
            1
        </td>
        <td class="hidden-xs">
            01/01/12
        </td>
        <td...

CSS

.formatTable tr:nth-child(even) {
    background-color:lightgray
}

.hoverTable tr:hover {
    background-color: #ffff99;
    cursor:pointer;
}

.hoverTable th {
    cursor:default;
}

.formatTable th{
    background-color: #0c268d;
    font-weight: normal;
    color:white;
}

.searchCriteria {
    font-size:large;
    color:black;
    font-weight:bold;
}

.addMargin {
    margin-bottom: 5px;
}

.removeMargin {
    margin-bottom: 0px;
}

@media screen and (min-width:361px)
{   

    table.TicketLists thead, .TicketLists tbody, .TicketLists tr, .TicketLists td , .TicketLists th { display: block; }

    .TicketLists tr:after {
            content: ' ';
            display: block;
            clear: both;
        }

    .TicketLists tbody {
        height: 600px;
        overflow-y: auto;
    }    

    .TicketLists tbody td {
            width: 12.2%;
            float: left;
        }

    .TicketLists th {
        float: left;
        width: 12.2%;
        text-align:left;
    }

    .notesColumn {
        width: 49.8% !important;
    }
}

@media screen and (max-width: 360px)
{
    h1 { 
        font-size: 160%;
        font-weight: bold;
    }

    table.TicketLists  {
        display: block; 
	}

    .TicketLists tbody {
        display: block;
    }

    .TicketLists th {
        display: none;
    }

    .TicketLists td {
        display: block;
    }

    .TicketLists tr {
        display: block;
        border: 1px solid #ccc;
    }

   .TicketLists td:nth-child(3) { border-top:solid; }

   table.TechTickets td:nth-of-type(3):before { content: "Owned By"; padding-right: 90px; font-weight:bold; }
   .TechTickets td:nth-of-type(4):before { content: "Category";  padding-right: 96px; font-weight: bold; }
    
   table.TechSearch td:nth-of-type(3):before { content: "Owned By";  padding-right: 94px; font-weight: bold; color:black; }
   .TechSearch td:nth-of-type(4):before { content: "Technician"; padding-right: 90px; font-weight:bold; color:black; }
  ...