OCU-TABLES

by Nate Armstrong

HTML

<link rel="stylesheet" href="https://backup.ohiochristian.edu/sites/all/themes/ocu/assets/css/ocu.style.css">
<div class="mb-3 row PSEO">
  <div class="col-12">
    <div>
      <h3>Monday/Wednesday</h3>
    </div>
    <div class="aria-compliant-table lastcol-just-right maxw-1400px minw-800px minw-set stripes">
      <div class="aria-rowgroup">
        <h5>8:00 AM - 9:15 AM&nbsp;&nbsp;&nbsp;<i>(Monday/Wednesday)</i></h5>
      </div>
      <div class="aria-rowgroup">
        <div class="aria-row  aria-row-header"><span class="aria-cell">Course Number</span><span class="aria-cell">Credit Hours</span><span class="aria-cell">Course Name</span><span class="aria-cell">Prerequiste</span><span class="aria-cell">Instructor</span></div>
        <div class="aria-row"><span class="aria-cell">CJU2010</span><span class="aria-cell">3</span><span class="aria-cell"> Law Enforcement</span><span class="aria-cell">CJU1010</span><span class="aria-cell">Dillard</span></div>
        <div class="aria-row"><span class="aria-cell">HIS2020</span><span class="aria-cell">3</span><span class="aria-cell">Western Civilization I</span><span class="aria-cell">&nbsp;</span><span class="aria-cell">Burchett</span></div>
        <div class="aria-row"><span class="aria-cell">MIN3025</span><span class="aria-cell">3</span><span class="aria-cell">Preaching I</span><span class="aria-cell">&nbsp;</span><span class="aria-cell">Mershimer</span></div>
        <div class="aria-row"><span class="aria-cell">PHL2000</span><span class="aria-cell">3</span><span class="aria-cell">Introduction to Philosophy</span><span class="aria-cell">&nbsp;</span><span class="aria-cell">Case</span></div>
        <div class="aria-row"><span class="aria-cell">ENG1000</span><span class="aria-cell">3</span><span class="aria-cell">English Composition I (sec 1)</span><span class="aria-cell">&nbsp;</span><span class="aria-cell">Barr</span></div>
        <div class="aria-row"><span class="aria-cell">MGT1000</span><span...

CSS

.new-class{
  white-space:pre-wrap;
}


.PSEO .aria-cell:nth-child(1){
  max-width:17%;
}

.PSEO .aria-cell:nth-child(2){
  max-width:13%;
}

.PSEO .aria-cell:nth-child(3){
  max-width:35%;
}

.PSEO .aria-cell:nth-child(4){
  max-width:20%;
}

.PSEO .aria-cell:nth-child(5){
  max-width:15%;
}