JSFiddle - React, Tailwind, and code Playground

by Kiran m

HTML

<div class="dataGridHeader">
  <div class="dataGridContent">
    <table cellpadding="0" cellspacing="0" class="scrolltablestyle style-even">
      <thead>
        <tr>
          <th width="160">Shopper Name</th>
          <th width="160">First Name</th>
          <th width="160">Last Name</th>
          <th width="160">User ID</th>
          <th width="160">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td width="160">C2C Fishing</td>
          <td width="160">John</td>
          <td width="160">Doe</td>
          <td width="160">C2C Fishing</td>
          <td width="160">Enabled</td>
        </tr>
        <tr>
          <td width="160">C2C Fishing</td>
          <td width="160">John</td>
          <td width="160">Doe</td>
          <td width="160">C2C Fishing</td>
          <td width="160">Enabled</td>
        </tr>
        <tr>
          <td width="160">C2C Fishing</td>
          <td width="160">John</td>
          <td width="160">Doe</td>
          <td width="160">C2C Fishing</td>
          <td width="160">Enabled</td>
        </tr>
        <tr>
          <td width="160">C2C Fishing</td>
          <td width="160">John</td>
          <td width="160">Doe</td>
          <td width="160">C2C Fishing</td>
          <td width="160">Enabled</td>
        </tr>
        <tr>
          <td width="160">C2C Fishing</td>
          <td width="160">John</td>
          <td width="160">Doe</td>
          <td width="160">C2C Fishing</td>
          <td width="160">Enabled</td>
        </tr>
        <tr>
          <td width="160">C2C Fishing</td>
          <td width="160">John</td>
          <td width="160">Doe</td>
          <td width="160">C2C Fishing</td>
          <td width="160">Enabled</td>
        </tr>
        <tr>
          <td width="160">C2C Fishing</td>
          <td width="160">John</td>
          <td width="160">Doe</td>
          <td width="160">C2C Fishing</td>
          <td width="160">Enabled</td>
        </tr>
        <tr>
        ...

CSS

/* ----- Scrolling Table ----- */


.dataGridHeader {
	position: relative;
	padding-top: 24px;
	_padding-top: 23px;
	width: 895px;
	border-left: 1px solid red;
	
}

.dataGridContent {
	overflow: auto;
	width: 915px;
	height: 144px;
}

.dataGridHeader thead tr {
	width: 915px;
	position: absolute;
	top: 0;
	left: 0;
}

.dataGridHeader table thead tr th, .dataGridHeader table tbody tr td {
	text-align: left;
	height: 0;
}

table.scrolltablestyle { border-top: 1px solid #D9D9D9; }

table.scrolltablestyle tbody tr td {
	background: #fff;
	text-align: left;
	padding: 4px 9px;
	border-bottom: 1px solid #999;
	border-right: 1px solid blue;
}

table.scrolltablestyle thead tr th {
	background-color: #FFFFD9;
	font-weight: normal;
	text-align: left;
	padding: 4px 9px 4px 9px;
	border-bottom: 1px solid #999999;
}

table.scrolltablestyle thead tr th {
	border-right: 1px solid blue;
	border-top: 1px solid blue;
}

table.scrolltablestyle tbody tr td { border-right: 1px solid green; }

table.scrolltablestyle tbody tr:last-child td { border-bottom: 0px solid #999; }