这是我的Codepen，
<div title="Monitor Table: Cluster Queue Status" data-type="livereport" data-title="Cluster Queue Status" class="u-monitor meter ui-draggable ui-draggable-handle ui-resizable" id="42DCmauenMCrxjZEb">
<div class="meter-header">
<div class="edge livereport"> </div>
<h4>Cluster Queue Status</h4>
<div class="dropdown">
<button aria-expanded="true" aria-haspopup="true" class="dropdown-toggle">
<span class="sr-only">Options: livereport</span>
<span class="icon icon-burger-small"></span>
</button>
<ul class="dropdown-menu with-arrow small align-right">
<li>
<div class="dropdown-content panels">
<div class="panel-edit">
<ul class="list-unstyled">
<li>
<button type="button" data-action="edit" class="btn-link link-with-icon icon-edit">
Edit
</button>
</li>
<li>
<button type="button" data-action="delete" class="btn-link link-with-icon icon-delete">Delete
</button>
</li>
</ul>
<hr>
<ul class="list-unstyled">
<li>
<button type="button" data-action="downloadPdf" class="btn-link">Download .pdf</button>
</li>
<!--<li>-->
<!--<button type="button" class="btn-link">Download .jpg</button>-->
<!--</li>-->
<!--<li>-->
<!--<button type="button" class="btn-link">Download .png</button>-->
<!--</li>-->
<li>
<button class="btn-link" data-action="downloadCSV" type="button">Download .csv</button>
<a style="display: none" id="downloadCSV" download="Cluster Queue Status.csv"></a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div style="right: auto; bottom: 5px; width:100%; overflow: auto;" class="u-monitor-container">
<div style="display: none;" class="table-loading">
<p>
<i aria-hidden="true" class="fa fa-spinner fa-pulse fa-fw"></i>
<span class="sr-only">Loading...</span>
</p>
</div>
<div class="filter-list">
</div>
<table style="max-height: 346px;" class="table table-striped" data-type="report">
<thead>
<tr>
<th data-key="cluster_name">
<div class="blocker"></div>
<button data-key="{"mainAttr":"cluster_name"}" class="th-container" type="button">
<span class="th-button-title">Cluster Name</span>
</button>
</th>
<th data-key="name">
<div class="blocker"></div>
<button data-key="{"mainAttr":"name"}" class="th-container" type="button">
<span class="th-button-title">Queue Name</span>
</button>
</th>
<th data-key="usedSlots">
<div class="blocker"></div>
<button data-key="{"mainAttr":"usedSlots"}" class="th-container" type="button">
<span class="th-button-title">Used Slots</span>
</button>
</th>
<th data-key="availableSlots">
<div class="blocker"></div>
<button data-key="{"mainAttr":"availableSlots"}" class="th-container" type="button">
<span class="th-button-title">Available Slots</span>
</button>
</th>
<th data-key="ambiguous">
<div class="blocker"></div>
<button data-key="{"mainAttr":"ambiguous"}" class="th-container" type="button">
<span class="th-button-title">Ambiguous</span>
</button>
</th>
<th data-key="disabledByCalendar">
<div class="blocker"></div>
<button data-key="{"mainAttr":"disabledByCalendar"}" class="th-container" type="button">
<span class="th-button-title">Disabled By Calendar</span>
</button>
</th>
<th data-key="disabledManual">
<div class="blocker"></div>
<button data-key="{"mainAttr":"disabledManual"}" class="th-container" type="button">
<span class="th-button-title">Disabled Manual</span>
</button>
</th>
<th data-key="error">
<div class="blocker"></div>
<button data-key="{"mainAttr":"error"}" class="th-container" type="button">
<span class="th-button-title">Error</span>
<span class="th-button-sort">
<i class="fa fa-sort-asc"></i>
</span>
</button>
</th>
<th data-key="loadAlarm">
<div class="blocker"></div>
<button data-key="{"mainAttr":"loadAlarm"}" class="th-container" type="button">
<span class="th-button-title">Load Alarm</span>
</button>
</th>
<th data-key="manualIntervention">
<div class="blocker"></div>
<button data-key="{"mainAttr":"manualIntervention"}" class="th-container" type="button">
<span class="th-button-title">Manual Intervention</span>
</button>
</th>
<th data-key="orphaned">
<div class="blocker"></div>
<button data-key="{"mainAttr":"orphaned"}" class="th-container" type="button">
<span class="th-button-title">Orphaned</span>
</button>
</th>
<th data-key="reservedSlots">
<div class="blocker"></div>
<button data-key="{"mainAttr":"reservedSlots"}" class="th-container" type="button">
<span class="th-button-title">Reserved Slots</span>
</button>
</th>
<th data-key="suspendByCalendar">
<div class="blocker"></div>
<button data-key="{"mainAttr":"suspendByCalendar"}" class="th-container" type="button">
<span class="th-button-title">Suspend By Calendar</span>
</button>
</th>
<th data-key="suspendManual">
<div class="blocker"></div>
<button data-key="{"mainAttr":"suspendManual"}" class="th-container" type="button">
<span class="th-button-title">Suspend Manual</span>
</button>
</th>
<th data-key="suspendOnSubordinate">
<div class="blocker"></div>
<button data-key="{"mainAttr":"suspendOnSubordinate"}" class="th-container" type="button">
<span class="th-button-title">Suspend On Subordinate</span>
</button>
</th>
<th data-key="suspendThreshold">
<div class="blocker"></div>
<button data-key="{"mainAttr":"suspendThreshold"}" class="th-container" type="button">
<span class="th-button-title">Suspend Threshold</span>
</button>
</th>
<th data-key="tempDisabled">
<div class="blocker"></div>
<button data-key="{"mainAttr":"tempDisabled"}" class="th-container" type="button">
<span class="th-button-title">Temp Disabled</span>
</button>
</th>
<th data-key="totalSlots">
<div class="blocker"></div>
<button data-key="{"mainAttr":"totalSlots"}" class="th-container" type="button">
<span class="th-button-title">Total Slots</span>
</button>
</th>
<th data-key="unknown">
<div class="blocker"></div>
<button data-key="{"mainAttr":"unknown"}" class="th-container" type="button">
<span class="th-button-title">Unknown</span>
</button>
</th>
<th data-key="load">
<div class="blocker"></div>
<button data-key="{"mainAttr":"load"}" class="th-container" type="button">
<span class="th-button-title">Load</span>
</button>
</th>
</tr>
</thead>
<tbody><tr><td>test charlie</td><td>queue-17.q</td><td>1754</td><td>8246</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>21.719</td></tr><tr><td>test charlie</td><td>queue-42.q</td><td>7226</td><td>2774</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>12.993</td></tr><tr><td>test charlie</td><td>queue-16.q</td><td>8469</td><td>1531</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>16.730</td></tr><tr><td>test charlie</td><td>queue-9.q</td><td>8639</td><td>1361</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>14.279</td></tr><tr><td>test charlie</td><td>queue-6.q</td><td>8584</td><td>1416</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>18.757</td></tr><tr><td>test charlie</td><td>queue-34.q</td><td>6280</td><td>3720</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>4.167</td></tr><tr><td>test charlie</td><td>queue-33.q</td><td>1839</td><td>8161</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>26.900</td></tr><tr><td>cluster 3</td><td>queue-10.q</td><td>3478</td><td>6522</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>1.511</td></tr><tr><td>cluster 3</td><td>queue-29.q</td><td>4918</td><td>5082</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>11.513</td></tr><tr><td>cluster 3</td><td>queue-28.q</td><td>4334</td><td>5666</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>25.730</td></tr><tr><td>cluster 3</td><td>queue-4.q</td><td>3960</td><td>6040</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>8.859</td></tr><tr><td>cluster 3</td><td>queue-24.q</td><td>4662</td><td>5338</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>19.812</td></tr><tr><td>cluster 3</td><td>queue-30.q</td><td>8255</td><td>1745</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>36.908</td></tr><tr><td>cluster 3</td><td>queue-11.q</td><td>5390</td><td>4610</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>2.718</td></tr><tr><td>UGE841</td><td>queue-2.q</td><td>8059</td><td>1941</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>37.822</td></tr><tr><td>UGE841</td><td>queue-43.q</td><td>7649</td><td>2351</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>29.769</td></tr><tr><td>UGE841</td><td>queue-8.q</td><td>784</td><td>9216</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>1.039</td></tr><tr><td>UGE841</td><td>queue-26.q</td><td>7183</td><td>2817</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>4.707</td></tr><tr><td>UGE841</td><td>queue-31.q</td><td>7089</td><td>2911</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>4.700</td></tr><tr><td>UGE841</td><td>queue-32.q</td><td>3501</td><td>6499</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>5.015</td></tr></tbody>
<tfoot>
<tr>
<td colspan="21">20 of 20</td>
</tr>
</tfoot>
</table>
</div>
<div style="width: 0; height: 0;" class="click-receiver">
<button style="display: none;" class="menu-hover" type="button"></button>
</div>
<div class="ui-resizable-handle ui-resizable-ne"></div>
<div class="ui-resizable-handle ui-resizable-n"></div>
<div class="ui-resizable-handle ui-resizable-nw"></div>
<div class="ui-resizable-handle ui-resizable-w"></div>
<div class="ui-resizable-handle ui-resizable-sw"></div>
<div class="ui-resizable-handle ui-resizable-s"></div>
<div class="ui-resizable-handle ui-resizable-se"></div>
<div class="ui-resizable-handle ui-resizable-e"></div>
</div>
这段html / css在chrome和firefox的现代版本中运行得很好，但它不支持我需要支持的Firefox 38： - （
基本上我有一个容器（主）位置绝对，溢出自动宽度相对于父容器（祖父母）100％。在主容器内部，我有一个桌子，在FF38中得到的宽度与主容器一样宽，并且列的某些部分相互重叠。在现代浏览器中，表格比容器宽，您可以看到一个滚动条，允许您向右/向左移动。
所以问题是如何在FF38上重现这种行为？ 提前谢谢： - ）