JSFiddle - React, Tailwind, and code Playground
HTML
<div id="queues">
<table id="songlist" tabindex="10">
<thead><tr><th>title</th><th>artist</th><th>time</th></tr></thead>
<tbody>
<tr><td>What's the Matter Here?</td><td>10,000 Maniacs</td><td>4:51</td></tr>
<tr><td>What's the Matter Here? (Unplugged)</td><td>10,000 Maniacs</td><td>4:51</td></tr>
<tr><td>Air For Life</td><td>Above & Beyond with Andy Moor</td><td>6:20</td></tr>
<tr><td>Adriatique - LIVE at The Cityfox Den (April 2015)</td><td>Adriatique</td><td>4:42:32</td></tr>
<tr><td>Truant</td><td>Alan Fitzpatrick</td><td>6:57</td></tr>
<tr><td>Emperor (Kastis Torrau & Arnas D Remix)</td><td>Ali Love feat. Kali</td><td>6:18</td></tr>
<tr><td>Rehab (Pantheon Remix)</td><td>Amy Winehouse</td><td>5:52</td></tr>
<tr><td>Keep Pushin' On (NoriZ Remix)</td><td>Andrew Rai & Mono.S</td><td>7:21</td></tr>
<tr><td>Sky Falls Down</td><td>Armin van Buuren</td><td>8:08</td></tr>
<tr><td>Audio Rehab Special w/ Mark Radford, Lance Morgan, Low Steppa, Vanilla Ace, Maximono & Nathan Dalton - 6th December 2015</td><td>Audio Rehab</td><td>4:57:15</td></tr>
<tr><td>What I Might Do</td><td>Ben Pearce</td><td>3:12</td></tr>
<tr><td>She's on fire (Maya Jane Coles Remix)</td><td>Bo Saris</td><td>6:00</td></tr>
<tr><td>Let's go Dancing (Solomun Remix)</td><td>Bodytsu</td><td>6:41</td></tr>
<tr><td>Nothing Seems To Matter</td><td>Bonnie Raitt</td><td>4:05</td></tr>
<tr><td>Regenerate (Pan-Pot Remix)</td><td>Booka Shade</td><td>7:12</td></tr>
<tr><td>Line Of Fire (Tube & Berger remix)</td><td>Bookashade ft. Karin Park</td><td>2:40</td></tr>
<tr><td>Arabella</td><td>CamelPhat</td><td>4:13</td></tr>
<tr><td>Cengiz Guzel Deepest Journey Last Christmas set 2015</td><td>cengiz</td><td>58:48</td></tr>
<tr><td>Hollow Talk(Lulu Rouge’s Stella Polaris Remix)</td><td>Choir of Young Believers</td><td>4:33</td></tr>
<tr><td>Rush Hour 062 May 2013...
CSS
* { box-sizing:border-box}
#queues {
position:fixed; top:0; left:0; right:0; bottom:0;
overflow:hidden;
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:flex-start;
}
table {
display:flex;
flex-flow:column;
height:100%; width:33%;
margin-right:4px;
overflow:hidden;
border-collapse:collapse;
}
table:last-child { margin-right:0 }
/* head takes the height it requires, and it's not scaled when table is resized */
table thead { flex:0 0 auto; width:calc(100% + 1px) }
/* body takes all the remaining available space */
table tbody { flex:1 1 auto; display:block; overflow-y:auto }
table tbody tr { width:100% }
table thead,
table tbody tr { display:table; table-layout:fixed }
td { max-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
tr > *:nth-child(1) { }
tr > *:nth-child(2) { width:30% }
tr > *:nth-child(3) { width:4em; min-width:4em; text-align:right }
th { text-align:left; background:#ccc; color:rgba(0,0,0,0.4) }
th, td { padding:1px 5px }