表格单元格在Firefox上太窄
[英]Table cells too narrow on Firefox
问题描述
我有一些以相当专业的方式布置的HTML表格，例如：
- tbody是可滚动的
- 琴身全高
- 表单元格充满椭圆
- 这些行是可拖动的HTML5
在Chrome（v48.0.2564.97 m）中，有关此布局的几乎所有内容都可以正常运行。 但是，Firefox（在Win 7x64上为v43.0.4）破坏了表的布局，导致最后一列太窄。
相关的CSS是：
tr > *:nth-child(1) { }
tr > *:nth-child(2) { width:30% }
tr > *:nth-child(3) { width:4em }
...，第三列的宽度为10px，而不是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 & 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 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 & 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 & Roll (Original Mix)</td><td>Earstrip & 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 & Fur</td><td>5:12</td></tr> <tr><td>Feel The 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 So 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 & The 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 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 & 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 & 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 A Feeling (Bontan Remix & 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 & 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 & 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 & 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 & 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 & 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 & 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 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 & 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 to Go (Original Mix)</td><td>TouchTalk & 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 & 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 & 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 & Fur</td><td>5:12</td></tr> <tr><td>Feel The 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 So High</td><td>Eli & 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>
Firefox在这里错了吗？ 更重要的是，我该如何修复它以使最后一列保持固定的宽度（同时保留上面的功能1-4）？
也在JSFiddle上： https ://jsfiddle.net/y4p93kmn/1/
1 个解决方案
解决方案1
1 已采纳 2016-02-05 18:02:36
当然，在我写下问题并缩减代码之后，我便找到了解决方案。
由于某种原因，它修复了Firefox在第三列中添加min-width:4em和width:4em问题。
tr > *:nth-child(1) { }
tr > *:nth-child(2) { width:30% }
tr > *:nth-child(3) { width:4em; min-width:4em }
如何解决表格列太窄的问题？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.