JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-header">
        <h3>Charity</h3>
    </div>
    <div class="table-responsive">
        <table cellpadding="9" class="table-hover">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.ID)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.EventName)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Organization)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.District)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Hours)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Donation)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.TotalValue)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.ModifiedDate)
                    </th>
                    <th class="crud-links"> Options</th>
                </tr>
            </thead>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.ID)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.EventName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Organization)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.District)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Hours)
                    </td>
                    <td>
                       ...

CSS

.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eeeeee;
}

@media (max-width: 1300px) {
  .table-responsive {
    width: inherit;
    margin-bottom: 15px;
    overflow-x:  scroll;
    overflow-y: hidden;
    border: 0px solid #dddddd;
    margin-right: 8%;
    max-width: 85%;
  }

.crud-links{
    position: absolute;
    width: 10em;
    right: 40px;
    background-color: #ffffff;
    }
    
.table-responsive table {
    table-layout:fixed;
    width:inherit;
    max-width:inherit;
}

JavaScript

$( document ).ready( function(){
    setMaxWidth();
    $( window ).bind( "resize", setMaxWidth ); //Remove this if it's not needed. It will react when window changes size.

    function setMaxWidth() {
        console.log('resize');
    $( ".table-responsive" ).css( "maxWidth", ( $( window ).width() * 0.80 | 0 ) + "px" );
    }

});