html - Table cells too narrow on Firefox -
i have few html tables laid out in rather specialized way, such that:
- the tbody scrollable
- the tbody full-height
- table cells overflow ellipses
- the rows html5 draggable
almost layout working in chrome (v48.0.2564.97 m). however, firefox (v43.0.4 on win 7x64) screws layout of tables, causing last column far narrow.
the relevant css is:
tr > *:nth-child(1) { } tr > *:nth-child(2) { width:30% } tr > *:nth-child(3) { width:4em } ...and third column ends 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 height requires, , it's not scaled when table resized */ table thead { flex:0 0 auto; width:calc(100% + 1px) } /* body takes 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 matter here?</td><td>10,000 maniacs</td><td>4:51</td></tr> <tr><td>what's matter here? (unplugged)</td><td>10,000 maniacs</td><td>4:51</td></tr> <tr><td>air life</td><td>above & beyond andy moor</td><td>6:20</td></tr> <tr><td>adriatique - live @ 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 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 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 2hr</td><td>christopher lawrence</td><td>2:10:01</td></tr> <tr><td>shake (vintage culture e gabe remix)</td><td>danson, marlon h</td><td>5:40</td></tr> <tr><td>uft 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 & 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 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 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 say</td><td>dave matthews band</td><td>4:07</td></tr> <tr><td>so 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 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 matter (forgiveness)</td><td>the eagles</td><td>6:26</td></tr> <tr><td>cook & roll (original mix)</td><td>earstrip & torha</td><td>5:43</td></tr> <tr><td>elements session 010 mixed smokin joe</td><td>elements session 010 mixed smokin joe</td><td>1:00:57</td></tr> <tr><td>california love</td><td>eli & fur</td><td>5:12</td></tr> <tr><td>feel fire</td><td>eli & fur</td><td>4:41</td></tr> <tr><td>over again</td><td>eli & fur</td><td>5:16</td></tr> <tr><td>you're high</td><td>eli & 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 & 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 & machine</td><td>5:01</td></tr> <tr><td>inside (vanilla ace & dharkfunkh remix)</td><td>flow & 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 cheek</td><td>frank sinatra</td><td>3:06</td></tr> <tr><td>into blue (torren foot remix)</td><td>friendless</td><td>5:11</td></tr> <tr><td>leama & moor €“ fact of 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 thread (gryffin & 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 & 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 feeling (bontan remix & pleasurekraft edit)</td><td>josh butler</td><td>5:02</td></tr> <tr><td>get right (original mix)</td><td>j.quest</td><td>5:23</td></tr> <tr><td>take on (sound avenue)</td><td>kastis torrau & arnas d</td><td>3:12</td></tr> <tr><td>kastis torrau live @ elements iceland 10.10.15 </td><td>kastis torrau live @ 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 kill (skream's let's ravey remix)</td><td>la roux</td><td>5:03</td></tr> <tr><td>the 1 (klangkarussell remix)</td><td>lane 8 ft. patrick baker</td><td>6:08</td></tr> <tr><td>hey (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 fly (maceo's flight home)</td><td>maceo plex & 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 before (original mix)</td><td>mass digital</td><td>5:53</td></tr> <tr><td>falling 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 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 & berger</td><td>6:03</td></tr> <tr><td>control (p.a.c.o. rmx)</td><td>modul kollektiv</td><td>4:12</td></tr> <tr><td>body work (album mix)</td><td>morgan page feat. tegan , sara</td><td>3:59</td></tr> <tr><td>perla (rise , fall remix)</td><td>nico parisi & 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 fly (maceo's flight home)</td><td>odd parents</td><td>9:00</td></tr> <tr><td>it don't matter 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 feel loved (adam k & 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 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 & 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 & girls (german brigante remix)</td><td>smash tv</td><td>6:15</td></tr> <tr><td>flashing life (audio go remix)</td><td>smutty , 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 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 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 not (kastis torrau & arnas d remix)</td><td>tilt</td><td>3:52</td></tr> <tr><td>written in reverse (feat. matthew koma)</td><td>tiësto & 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 go (original mix)</td><td>touchtalk & tolkien 32</td><td>2:32</td></tr> <tr><td>sounds radio slr012</td><td>trent cantrelle</td><td>1:00:23</td></tr> <tr><td>wicked game (james carter & levi remix)</td><td>tula</td><td>3:55</td></tr> <tr><td>with or without (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 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 - 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 & 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 - 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 @ 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 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 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 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 & fur</td><td>5:12</td></tr> <tr><td>feel fire</td><td>eli & fur</td><td>4:41</td></tr> <tr><td>over again</td><td>eli & fur</td><td>5:16</td></tr> <tr><td>you're high</td><td>eli & fur</td><td>5:26</td></tr> <tr><td>it's gonna 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 picture excellent</td><td>peter gabriel</td><td>4:18</td></tr></tbody> </table> </div>is firefox wrong here? , more important, how can fix last column kept fixed width (while retaining features 1-4 above)?
also on jsfiddle: https://jsfiddle.net/y4p93kmn/1/
of course right after write question , pare down code, find solution.
for reason fixes firefox add min-width:4em along width:4em on third column.
tr > *:nth-child(1) { } tr > *:nth-child(2) { width:30% } tr > *:nth-child(3) { width:4em; min-width:4em } 
Comments
Post a Comment