JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<section id="additionalOfferingsSection" class="additional_offerings card flex-col display_hidde">
  <h2 class="heading">Additional Offerings </h2>
  <div class="additional_offerings_details_content flex-row flex-wrap">


    <div class="ao-table-container" data-aoModal-id="aoModal">
      <table class="ao-data-table">
        <thead>
          <tr>
            <th class="sortable" data-sort-type="string">Issuer Name</th>
            <th class="sortable" data-sort-type="date">Announced Date</th>
            <th>D&amp;C Matter Description</th>
            <th>D&amp;C Company Description</th>
            <th>Marketing Description</th>
            <th class="sortable" data-sort-type="string">Matter Code</th>
            <th class="sortable" data-sort-type="string">Security Type</th>
            <th class="sortable" data-sort-type="string">Offering Type</th>
            <th class="sortable" data-sort-type="string">Managers</th>
            <th>D&amp;C Team Description</th>
            <th class="sortable" data-sort-type="number">Copy #</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Vivamus in erat ut</td>

            <td>3/27/2020</td>

            <td>Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Vestibulum suscipit nulla quis orci. Aliquam eu nunc. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Vestibulum eu odio. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Aenean massa. Vivamus euismod mauris. Aenean ut eros et nisl sagittis vestibulum.</td>

            <td>Mauris sollicitudin fermentum libero. Vestibulum fringilla pede sit amet augue. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Mauris sollicitudin fermentum libero. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Mauris sollicitudin fermentum libero.</td>

            <td>Vestibulum ullamcorper mauris at...

CSS

.ao-table-container::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.ao-table-container::-webkit-scrollbar-thumb {
  background: #140be3;
  border: 0px none #ffffff;
  border-radius: 0 6px 6px 0;
}
.ao-table-container::-webkit-scrollbar-thumb:horizontal{
  border-radius: 0 0 6px 6px;
}

.ao-table-container::-webkit-scrollbar-track:vertical {
    border-radius: 0px 6px 6px 0px;
}

.ao-table-container::-webkit-scrollbar-thumb:hover {
  background: #140be3;
}

.ao-table-container::-webkit-scrollbar-track {
  background: #eee;
  border: 0px solid #ffffff;
  border-radius: 0 6px 6px 0;
}

.ao-table-container::-webkit-scrollbar-track:horizontal {
    border-radius: 0px 0px 6px 6px;
}

.ao-noBorder{
	border:none !important;
	box-shadow:none !important;
}


.ao-table-container {
  overflow-x: auto;
  margin-bottom: 13px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: rgb(0 0 0 / 12%) 0px 1px 2px, rgb(0 0 0 / 24%) 0px 1px 1px;
  max-height: 602px;
}

/* Basic styles for table */
.ao-table-container table {
  width: 100%;
  border-collapse: collapse;
  border: none;
}

.ao-table-container th,
.ao-table-container td {
  border-left: 1px solid #e0e0e0;
  border-top: 1px solid #e0e0e0;
  padding: 8px;
  text-align: left;
}

.ao-table-container th {
  border-top: none;
  position: sticky;
  top: 0;
  background-color: white; /* or any color that fits your design */
  z-index: 10;
}

.ao-table-container th::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px; /* Height of the border */
  background-color: #eee; /* Color of the border */
}

.ao-table-container td:first-child,
.ao-table-container th:first-child {
  border-left: none;
}

.ao-table-container .ao-data-table td {
  min-width: 150px;
  vertical-align: top;
}

.ao-table-container .ao-data-table td a {
  display: block;
  color: #140be3;
  text-decoration: underline;
}

/* Styles for modal */
.aoModal {
  visibility: hidden;
  /* Initially hidden...

JavaScript

$(document).ready(function() {
  function openAoModal(key, fullText) {
    var aoModal = document.querySelector('.aoModal');
    var aoModalContent = aoModal.querySelector('.aoModal-content');
    var aoModalKeyElement = document.getElementById('aoModalKey');
    var fullTextElement = document.getElementById('ao-fullText');

    aoModalKeyElement.innerText = key;
    fullTextElement.innerText = fullText;

    aoModal.classList.add('ao-show');
    aoModalContent.classList.add('ao-show');
  }

  function closeAoModal() {
    var aoModal = document.querySelector('.aoModal');
    var aoModalContent = aoModal.querySelector('.aoModal-content');
    var aoModalKeyElement = document.getElementById('aoModalKey');
    var fullTextElement = document.getElementById('ao-fullText');

    aoModalKeyElement.innerText = '';
    fullTextElement.innerText = '';

    aoModal.classList.remove('ao-show');
    aoModalContent.classList.remove('ao-show');
  }

  function addReadMore(table, key, cell) {
    if (cell.innerText.length > 100) {
      // store the full text in a data attribute
      cell.setAttribute('data-full-text', cell.innerText);

      var shortText = cell.innerText.substring(0, 97) + '... ';
      var readMore = document.createElement('a');
      readMore.href = '#';
      readMore.innerText = 'View More';
      readMore.onclick = function() {
        openAoModal(key, cell.getAttribute('data-full-text'));
        return false;
      };

      cell.innerHTML = shortText;
      cell.appendChild(readMore);
    }
  }

  function initializeTableContainer(container) {
    var table = container.querySelector('.ao-data-table');
    var headers = table.querySelectorAll('th');
    table.querySelectorAll('tbody tr').forEach(function(row) {
      row.querySelectorAll('td').forEach(function(cell, index) {
        var key = headers[index].innerText;
        addReadMore(table, key, cell);
      });
    });

    var closeAoBtn = $('.aoModal .ao-close')[0];
    closeAoBtn.onclick =...