Table cells too narrow on Firefox

Question

I have a few HTML tables laid out in a rather specialized way, such that:

1. the tbody is scrollable
2. the tbody is full-height
3. table cells overflow with ellipses
4. the rows are HTML5 draggable

Almost everything about this layout is working perfectly in Chrome (v48.0.2564.97 m). However, Firefox (v43.0.4 on Win 7x64) screws up the layout of the tables, causing the last column to be far too narrow.

The relevant CSS is:

tr > *:nth-child(1) {  }
tr > *:nth-child(2) { width:30% }
tr > *:nth-child(3) { width:4em }

...and the third column ends up being 10px wide instead of 4em.

 * { 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; text-align:right } th { text-align:left; background:#ccc; color:rgba(0,0,0,0.4) } th, td { padding:1px 5px } 

 <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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 2HR</td><td>Christopher Lawrence</td><td>2:10:01</td></tr> <tr><td>Shake That (Vintage Culture e Gabe Remix)</td><td>Danson, Marlon H</td><td>5:40</td></tr> <tr><td>UFT For The MC</td><td>Dark Matter Featuring MC Hawki</td><td>3:29</td></tr> <tr><td>Ants Marching</td><td>Dave Matthews</td><td>4:27</td></tr> <tr><td>Typical Situation</td><td>Dave Matthews &amp; Tim Reynolds</td><td>7:02</td></tr> <tr><td>#41</td><td>Dave Matthews Band</td><td>6:40</td></tr> <tr><td>Ants Marching</td><td>Dave Matthews Band</td><td>4:31</td></tr> <tr><td>Crash Into Me</td><td>Dave Matthews Band</td><td>5:17</td></tr> <tr><td>Cry Freedom</td><td>Dave Matthews Band</td><td>5:54</td></tr> <tr><td>Drive In Drive Out</td><td>Dave Matthews Band</td><td>5:55</td></tr> <tr><td>Let you Down</td><td>Dave Matthews Band</td><td>4:08</td></tr> <tr><td>Lie In Our Graves</td><td>Dave Matthews Band</td><td>5:43</td></tr> <tr><td>Proudest Monkey</td><td>Dave Matthews Band</td><td>9:12</td></tr> <tr><td>Satellites</td><td>Dave Matthews Band</td><td>4:46</td></tr> <tr><td>Say Goodbye</td><td>Dave Matthews Band</td><td>6:11</td></tr> <tr><td>So Much To Say</td><td>Dave Matthews Band</td><td>4:07</td></tr> <tr><td>So Much To Say</td><td>Dave Matthews Band</td><td>9:25</td></tr> <tr><td>Too Much</td><td>Dave Matthews Band</td><td>4:22</td></tr> <tr><td>Tripping Billies</td><td>Dave Matthews Band</td><td>5:01</td></tr> <tr><td>Two Step</td><td>Dave Matthews Band</td><td>6:28</td></tr> <tr><td>Typical Situation</td><td>Dave Matthews Band</td><td>5:58</td></tr> <tr><td>Heaven's Earth (Matt Dare mix)</td><td>Delerium</td><td>4:23</td></tr> <tr><td>They Don't Know</td><td>Disciples</td><td>5:31</td></tr> <tr><td>Only A Matter Of Time</td><td>Dream Theater</td><td>7:20</td></tr> <tr><td>Inta</td><td>Dusky</td><td>5:57</td></tr> <tr><td>Love Taking Over</td><td>Dusky</td><td>6:22</td></tr> <tr><td>Tribute Mix 2014</td><td>DUSKY</td><td>2:18:33</td></tr> <tr><td>Yoohoo</td><td>Dusky</td><td>6:03</td></tr> <tr><td>Heart Of The Matter (Forgiveness)</td><td>The Eagles</td><td>6:26</td></tr> <tr><td>Cook &amp; Roll (Original Mix)</td><td>Earstrip &amp; Torha</td><td>5:43</td></tr> <tr><td>Elements session 010 mixed by Smokin joe</td><td>Elements session 010 mixed by Smokin joe</td><td>1:00:57</td></tr> <tr><td>California Love</td><td>Eli &amp; Fur</td><td>5:12</td></tr> <tr><td>Feel The Fire</td><td>Eli &amp; Fur</td><td>4:41</td></tr> <tr><td>Over Again</td><td>Eli &amp; Fur</td><td>5:16</td></tr> <tr><td>You're So High</td><td>Eli &amp; Fur</td><td>5:26</td></tr> <tr><td>Blue Skies (Maya Jane Coles Remix)</td><td>Ella Fitzgerald</td><td>5:37</td></tr> <tr><td>Matt Won't Come Back</td><td>The Emergency</td><td>4:24</td></tr> <tr><td>Live @ Alexandra Palace, London</td><td>Eric Prydz presents EPIC</td><td>1:31:50</td></tr> <tr><td>The Underground</td><td>Excision &amp; Downlink</td><td>4:57</td></tr> <tr><td>T-Break (Beta Remix)</td><td>Flack.su</td><td>7:35</td></tr> <tr><td>Spectrum (Maya Jane Coles Remix)</td><td>Florence &amp; The Machine</td><td>5:01</td></tr> <tr><td>Inside (Vanilla Ace &amp; Dharkfunkh Remix)</td><td>Flow &amp; Zeo, Nytron, Tea Lyrics</td><td>5:03</td></tr> <tr><td>Lost Feat. Abigail De Haro (Stark D Edit.)</td><td>Frank Ocean</td><td>6:48</td></tr> <tr><td>Dancing Cheek To Cheek</td><td>Frank Sinatra</td><td>3:06</td></tr> <tr><td>Into The Blue (Torren Foot Remix)</td><td>Friendless</td><td>5:11</td></tr> <tr><td>Leama &amp; Moor €“ Fact of the Matter</td><td>Gareth Emery</td><td>5:58</td></tr> <tr><td>Chorale (St. Matthew Passion)</td><td>The Glencairn Horns</td><td>1:30</td></tr> <tr><td>Thine Arm, O Lord (St. Matthew Passion)</td><td>The Glencairn Horns</td><td>1:14</td></tr> <tr><td>Banks - Beggin For Thread (Gryffin &amp; Hotel Garuda Remix)</td><td>GRYFFIN</td><td>4:04</td></tr> <tr><td>Bipolar Sunshine - Daydreamer (Gryffin Remix)</td><td>GRYFFIN</td><td>4:11</td></tr> <tr><td>Ellie Goulding - Burn (Gryffin Remix)</td><td>GRYFFIN</td><td>4:06</td></tr> <tr><td>Josef Salvat - Open Season (Gryffin Remix)</td><td>GRYFFIN</td><td>4:00</td></tr> <tr><td>Tove Lo - Talking Body (Gryffin Remix)</td><td>GRYFFIN</td><td>4:29</td></tr> <tr><td>Nu Deep Music Guest mix 018</td><td>Heavy Pins</td><td>56:36</td></tr> <tr><td>Let's Panic</td><td>Heavy Pins &amp; Malikk</td><td>2:48</td></tr> <tr><td>Uncharted</td><td>Henry Saiz</td><td>8:32</td></tr> <tr><td>Womb</td><td>Hot Since 82</td><td>6:49</td></tr> <tr><td>4A - 4A Locked Groove (NINJA)</td><td>John Cosani, Julian Rodriguez</td><td>7:04</td></tr> <tr><td>Noisily Original Mix (Full mix)</td><td>John Monkman</td><td>6:44</td></tr> <tr><td>Got A Feeling (Bontan Remix &amp; Pleasurekraft Edit)</td><td>Josh Butler</td><td>5:02</td></tr> <tr><td>Get It Right (Original Mix)</td><td>J.Quest</td><td>5:23</td></tr> <tr><td>Take Over (Sound Avenue)</td><td>Kastis Torrau &amp; Arnas D</td><td>3:12</td></tr> <tr><td>Kastis Torrau live at Elements Iceland 10.10.15 </td><td>Kastis Torrau live at Elements Iceland 10.10.15</td><td>1:11:19</td></tr> <tr><td>My Own Business (Original Mix)</td><td>Kolombo</td><td>5:56</td></tr> <tr><td>When You're Watching Me</td><td>Krankbrother</td><td>9:26</td></tr> <tr><td>In For The Kill (Skream's Let's Get Ravey Remix)</td><td>La Roux</td><td>5:03</td></tr> <tr><td>The One (Klangkarussell Remix)</td><td>Lane 8 ft. Patrick Baker</td><td>6:08</td></tr> <tr><td>Hey Now (Sasha Remix)</td><td>London Grammar</td><td>8:33</td></tr> <tr><td>Sign Me Out (Klartraum Remix)</td><td>Lulu Rouge</td><td>8:07</td></tr> <tr><td>Learn To Fly (Maceo's Flight Home)</td><td>Maceo Plex &amp; Odd Parents</td><td>8:28</td></tr> <tr><td>Aerosol Can (Baytek Remix)</td><td>Major Lazer</td><td>4:19</td></tr> <tr><td>Never Felt Like This Before (Original Mix)</td><td>Mass Digital</td><td>5:53</td></tr> <tr><td>Falling Into Place</td><td>Matt Lange</td><td>7:54</td></tr> <tr><td>#231 Max Graham: Cycles Radio</td><td>Max Graham</td><td>2:00:00</td></tr> <tr><td>Max Graham EOYC 2015</td><td>Max Graham</td><td>3:57:58</td></tr> <tr><td>Easier To Hide</td><td>Maya Jane Coles</td><td>5:01</td></tr> <tr><td>Missing Love (Original Mix)</td><td>The Mekanism</td><td>5:52</td></tr> <tr><td>Nothing Else Matters</td><td>Metallica</td><td>6:29</td></tr> <tr><td>Stranger In Moscow (Jerome Isma Ae Remix)</td><td>Michael Jackson</td><td>7:01</td></tr> <tr><td>Lovebreak (Wild Culture Remix)</td><td>Milan Euringer, Tube &amp; Berger</td><td>6:03</td></tr> <tr><td>Control (PACO RMX)</td><td>Modul Kollektiv</td><td>4:12</td></tr> <tr><td>Body Work (Album Mix)</td><td>Morgan Page feat. Tegan and Sara</td><td>3:59</td></tr> <tr><td>Perla (Rise And Fall Remix)</td><td>Nico Parisi &amp; Gai Barone</td><td>8:20</td></tr> <tr><td>Deep Caf Vol. 19</td><td>Nigel Stately</td><td>1:01:05</td></tr> <tr><td>Learn To Fly (Maceo's Flight Home)</td><td>Odd Parents</td><td>9:00</td></tr> <tr><td>It Don't Matter To Me</td><td>Phil Collins</td><td>4:19</td></tr> <tr><td>One Moment (JazzyFunk Remix)</td><td>Phreo</td><td>3:16</td></tr> <tr><td>So Long</td><td>Poupon</td><td>4:19</td></tr> <tr><td>Gunfire (Original Mix)</td><td>Pretty Pink Ft. Janine Villforth</td><td>5:02</td></tr> <tr><td>Stanton (Original Mix)</td><td>Raxon</td><td>6:58</td></tr> <tr><td>Need To Feel Loved (Adam K &amp; Soha Vocal Remix)</td><td>Reflekt</td><td>6:39</td></tr> <tr><td>Sordid Affair (Maceo Plex Remix)</td><td>Royksopp</td><td>7:58</td></tr> <tr><td>Pump It Up</td><td>Savoy</td><td>3:49</td></tr> <tr><td>Just Live</td><td>Sharam Jey</td><td>7:57</td></tr> <tr><td>Music Flow</td><td>Sharam Jey &amp; Vanilla Ace</td><td>5:29</td></tr> <tr><td>A Matter Of Minutes</td><td>Shawn Colvin</td><td>5:07</td></tr> <tr><td>Sapporo (Original Mix)</td><td>Shingo Nakamura</td><td>2:00</td></tr> <tr><td>Noise &amp; Girls (German Brigante Remix)</td><td>Smash TV</td><td>6:15</td></tr> <tr><td>Flashing Your Life (Audio Go Remix)</td><td>Smutty and Funky</td><td>5:07</td></tr> <tr><td>50 Cent - 21 Questions (SNBRN Remix)</td><td>SNBRN</td><td>5:48</td></tr> <tr><td>Beat The Sunrise feat. Andrew Watt</td><td>SNBRN</td><td>2:53</td></tr> <tr><td>The Game - Let's Ride (SNBRN Remix)</td><td>SNBRN</td><td>5:17</td></tr> <tr><td>Marvin Gaye Sexual Healing (SNBRN Remix)</td><td>SNBRN</td><td>4:34</td></tr> <tr><td>Melanie Martinez - Carousel (SNBRN Remix)</td><td>SNBRN</td><td>5:41</td></tr> <tr><td>Pretty Ricky ft. 50 Cent - Grind With Me (SNBRN Remix)</td><td>SNBRN</td><td>4:21</td></tr> <tr><td>No Words</td><td>Stefan Z</td><td>9:06</td></tr> <tr><td>Japanese Schoolgirls (PROFF Remix)</td><td>Suspect 44</td><td>3:34</td></tr> <tr><td>Bugatti (Torren Foot Remix)</td><td>Tiga</td><td>5:17</td></tr> <tr><td>Here Is Not Now (Kastis Torrau &amp; Arnas D Remix)</td><td>TILT</td><td>3:52</td></tr> <tr><td>Written In Reverse (feat. Matthew Koma)</td><td>Tiësto &amp; Hardwell</td><td>4:28</td></tr> <tr><td>Baker Baker (Matt Mix)</td><td>Tori Amos</td><td>4:11</td></tr> <tr><td>Got to Go (Original Mix)</td><td>TouchTalk &amp; Tolkien 32</td><td>2:32</td></tr> <tr><td>Sounds Like Radio SLR012</td><td>Trent Cantrelle</td><td>1:00:23</td></tr> <tr><td>Wicked Game (James Carter &amp; Levi Remix)</td><td>Tula</td><td>3:55</td></tr> <tr><td>With or without you (Dee Cue Edit)</td><td>U2 (Boyce Avenue ft Kina Grannis)</td><td>6:34</td></tr> <tr><td>DAWG (Original Mix)</td><td>Uncle Fritz</td><td>6:16</td></tr> <tr><td>Day to Night</td><td>Wild Culture</td><td>4:48</td></tr> <tr><td>Memento</td><td>Yotto</td><td>8:11</td></tr> <tr><td>Spectrum (Radio Mix) [feat. Matthew Koma]</td><td>Zedd</td><td>4:03</td></tr> <tr><td>Ahmet Sendil End of year 2015 Mix</td><td></td><td>1:03:41</td></tr> <tr><td>Russ Yallop feat. Aimee Sophia - The Journey (DAVI Remix).wav</td><td></td><td>7:52</td></tr> <tr><td>John_00_Fleming-GTG-March_2015.mp3</td><td></td><td>2:00:07</td></tr> <tr><td>Re Dupre &amp; Vintage Culture- Love Haters (Original Mix).mp3</td><td></td><td>6:46</td></tr> <tr><td>KygoMix.mp3</td><td></td><td>35:25</td></tr> <tr><td>Lane 8 Winter 2015 Mixtape.mp3</td><td></td><td>1:30:00</td></tr> <tr><td>Mario Da Ragnio Mix (TAKE AWAY PDCAST 0514).mp3</td><td></td><td>1:00:45</td></tr> <tr><td>Betoko - A Grey Day In May.mp3</td><td></td><td>57:44</td></tr> <tr><td>Graveyard Tan (Version Two).mp3</td><td></td><td>7:53</td></tr> <tr><td>Promo Mix January 2016.mp3</td><td></td><td>1:00:55</td></tr> <tr><td>Rodg Live @ A State Of Trance Festival Mexico City 10-10-2015.mp3</td><td></td><td>59:30</td></tr> <tr><td>Gryffin Flight Log 002 - Winter Solstice Mix.mp3</td><td></td><td>51:20</td></tr> <tr><td>Going Deeper - Podcast [January 2016].mp3</td><td></td><td>58:22</td></tr> <tr><td>Going Deeper - Podcast [December 2015].mp3</td><td></td><td>52:24</td></tr> <tr><td>Lights Out 36.mp3</td><td></td><td>59:56</td></tr> <tr><td>What Would You Say.mp3</td><td></td><td>4:07</td></tr> <tr><td>Gabriel Boni @ OUT - Bauru .mp3</td><td></td><td>1:05:16</td></tr> <tr><td>Joseph Haydn - Deutschland Uber Alles.mp3</td><td></td><td>3:35</td></tr> </tbody> </table> <table id="myqueue" tabindex="20"> <thead><tr><th>title</th><th>artist</th><th>time</th></tr></thead> <tbody><tr><td>It's Gonna Get Better</td><td>Genesis</td><td>5:01</td></tr> <tr><td>Hello Again</td><td>The Cars</td><td>3:46</td></tr> <tr><td>Illegal Alien</td><td>Genesis</td><td>5:15</td></tr> <tr><td>Venus</td><td>Bananarama</td><td>3:51</td></tr> <tr><td>This is the Picture Excellent</td><td>Peter Gabriel</td><td>4:18</td></tr></tbody> </table> <table id="upnext" tabindex="30"> <thead><tr><th>title</th><th>artist</th><th>time</th></tr></thead> <tbody><tr><td>Jukebox Hero</td><td>Foreigner</td><td>4:19</td></tr> <tr><td>Seven Wonders</td><td>Fleetwood Mac</td><td>3:43</td></tr> <tr><td>Rio</td><td>Duran Duran</td><td>5:33</td></tr> <tr><td>California Love</td><td>Eli &amp; Fur</td><td>5:12</td></tr> <tr><td>Feel The Fire</td><td>Eli &amp; Fur</td><td>4:41</td></tr> <tr><td>Over Again</td><td>Eli &amp; Fur</td><td>5:16</td></tr> <tr><td>You're So High</td><td>Eli &amp; Fur</td><td>5:26</td></tr> <tr><td>It's Gonna Get Better</td><td>Genesis</td><td>5:01</td></tr> <tr><td>Hello Again</td><td>The Cars</td><td>3:46</td></tr> <tr><td>Illegal Alien</td><td>Genesis</td><td>5:15</td></tr> <tr><td>Venus</td><td>Bananarama</td><td>3:51</td></tr> <tr><td>This is the Picture Excellent</td><td>Peter Gabriel</td><td>4:18</td></tr></tbody> </table> </div> 

Is Firefox wrong here? And more important, how can I fix it so that the last column is kept to a fixed width (while retaining features 1-4 above)?

---

Also on JSFiddle: https://jsfiddle.net/y4p93kmn/1/

Answer 1

Of course right after I write up the question and pare down the code, I find the solution.

For some reason it fixes Firefox to add min-width:4em along with width:4em on the third column.

tr > *:nth-child(1) {  }
tr > *:nth-child(2) { width:30% }
tr > *:nth-child(3) { width:4em; min-width:4em }

https://jsfiddle.net/y4p93kmn/2/