JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<table id="songList">
	<thead>
		<tr>
			<th id="check"><input type="checkbox" title="Select All"></th>
			<th id="delete"><button title="Delete Selected"></button></th>
			<th id="play"><button></button></th>
			<th id="artist" style="width: 296px; ">Artist</th>
			<th id="title" style="width: 296px; ">Title</th>
			<th id="album" style="width: 297px; ">Album</th>
		</tr>
	</thead>
	<tbody style="height: 204px; " class="ui-sortable">
		<tr class="ui-state-default playing">
			<td class="check"><input type="checkbox"></td>
			<td class="delete"><button title="Delete From List"></button></td>
			<td class="play"><button></button></td>
			<td class="artist" style="width: 296px; ">Masakazu Sugimori</td>
			<td class="title" style="width: 296px; ">Ace Attorney ~ Prologue</td>
			<td class="album" style="width: 280px; ">Phoenix Wright - Ace Attorney OST</td>
		</tr>
		<tr class="ui-state-default">
			<td class="check"><input type="checkbox"></td>
			<td class="delete"><button title="Delete From List"></button></td>
			<td class="play"><button></button></td>
			<td class="artist" style="width: 296px; ">Masakazu Sugimori</td>
			<td class="title" style="width: 296px; ">Reminiscence ~ Case DL-6</td>
			<td class="album" style="width: 280px; ">Phoenix Wright - Ace Attorney OST</td>
		</tr>
		<tr class="ui-state-default">
			<td class="check"><input type="checkbox"></td>
			<td class="delete"><button title="Delete From List"></button></td>
			<td class="play"><button></button></td>
			<td class="artist" style="width: 296px; ">Masakazu Sugimori</td>
			<td class="title" style="width: 296px; ">Rise From The Ashes ~ End</td>
			<td class="album" style="width: 280px; ">Phoenix Wright - Ace Attorney OST</td>
		</tr>
	</tbody>
</table>

CSS

table input[type=checkbox], table button {
    border: none;
    margin: 0;
    padding: 0;
    width: 13px;
    height: 13px;
    position: relative;
    top: 1px;
}

table {
    border-spacing: 0;
    width: 100%;
}

thead {
    display: block;
    width: 100%;
}

tbody {
    display: block;
    width: 100%;
    overflow-y: scroll;
}

tr {
    padding: 0;
    margin: 0;
}

th {

    border-top: 1px solid #4d4b48;
    border-left: 1px solid #4d4b48;
    border-bottom: 1px solid #171614;
    border-right: 1px solid #171614;
    padding: 6px 7px;
    margin: 0;
}

td {
    border-left: 1px solid #4d4b48;
    border-bottom: 1px solid #4d4b48;
    padding: 7px 8px 6px 7px;
    margin: 0;
}
.ui-placeholder{
    background-color: green;
    padding-right:10px;
    height:50px;
}

JavaScript

$('#songList tbody').sortable({
    refreshPositions: true,
    opacity: 0.6,
    scroll: true,
    containment: 'parent',
    placeholder: 'ui-placeholder',
    tolerance: 'pointer',
    'start': function (event, ui) {
        ui.placeholder.html("<td colspan='6'></td>")
    }
}).disableSelection();