JSFiddle - React, Tailwind, and code Playground

by Michael Coomey

HTML

<table>
    <thead class="fixedHeader">
        <tr>
            <th>Length</th>
            <th>Instructor</th>
            <th>Play/Purchase</th>
            <th>Replace</th>
            <th>Destroy</th>
        </tr>
    </thead>
    <tbody class="scrollContent sortableTable ui-sortable">
        <tr>
            <td>Row 1</td>
            <td>Mr. Coomey</td>
            <td><a href="/course_assets/6/videos/55">Play</a></td>
            <td><a href="#">Replace</a></td>
            <td><a href="#">Destroy</a></td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Mr. Coomey</td>
            <td><a href="/course_assets/6/videos/55">Play</a></td>
            <td><a href="#">Replace</a></td>
            <td><a href="#">Destroy</a></td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Mr. Coomey</td>
            <td><a href="/course_assets/6/videos/55">Play</a></td>
            <td><a href="#">Replace</a></td>
            <td><a href="#">Destroy</a></td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Mr. Coomey</td>
            <td><a href="/course_assets/6/videos/55">Play</a></td>
            <td><a href="#">Replace</a></td>
            <td><a href="#">Destroy</a></td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Mr. Coomey</td>
            <td><a href="/course_assets/6/videos/55">Play</a></td>
            <td><a href="#">Replace</a></td>
            <td><a href="#">Destroy</a></td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Mr. Coomey</td>
            <td><a href="/course_assets/6/videos/55">Play</a></td>
            <td><a href="#">Replace</a></td>
            <td><a href="#">Destroy</a></td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Mr. Coomey</td>
            <td><a href="/course_assets/6/videos/55">Play</a></td>
            <td><a href="#">Replace</a></td>
            <td><a href="#">Destroy</a></td>
        </tr>
   ...

CSS

thead.fixedHeader tr {
  display: block;
  background: #cce6e6;
  width: 686px;
  height: 37px;
  margin: 0;
  color: black;
  font-size: 1em;
  font-weight: bold;
  vertical-align: center;
  border-collapse: collapse;
}
thead.fixedHeader tr th {
  border: 1px solid #006666;
  height: 34px;
  width: 200px;
  padding-left: 5px;
}
thead.fixedHeader tr th + th {
  width: 100px;
}
thead.fixedHeader tr th + th + th {
  width: 150px;
}
thead.fixedHeader tr th + th + th + th {
  width: 100px;
}



tbody.scrollContent {
  display: block;
  width: 701px;
  height: 460px;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
  border-bottom: 1px solid #006666;
  overflow-y: scroll;
}


tbody.scrollContent tr:nth-child(even) td {
  background-color: #cce6e6;
}
tbody.scrollContent tr:nth-child(odd) td {
  background-color: white;
}
tbody.scrollContent td {
  border-top: none;
  border-right: 1px solid #006666;
  border-bottom: none;
  border-left: 1px solid #006666;
  vertical-align: center;
  font-size: 14px;
  padding-left: 5px;
  width: 200px;
  height: 35px;
}
tbody.scrollContent td + td {
  width: 100px;
}
tbody.scrollContent td + td + td {
  width: 150px;
}
tbody.scrollContent td + td + td + td {
  width: 100px;
}
tbody.scrollContent td + td + td + td + td {
  width: 100px;
}
tbody.scrollContent tr:last-child td {
  border-bottom: 1px solid #006666;
}