0
在我的響應式「flipscroll」表格中使用「fieldset」包裝時，它會打破布局..但是當「fieldset」不作爲包裝應用時，樣式是正確的。我需要使用fieldset的原因是要檢查所有複選框的功能。如何將fieldset元素包含在響應表「flipscroll」中（而不是打破布局）？
將屏幕從「屏幕」模式調整到「移動」模式以查看問題。 「移動」模式是存在問題的地方。
的jsfiddle：http://jsfiddle.net/MJ2nt/
HTML
<h1>Problem with "Fieldset" and "Responsive" table</h1>
<p>Responsive table works fine without "fieldset" element as a wrapper, but breaks when "fieldset" is wrapped around the table. The reason to use "fieldset" element in this case is for the "checkall" class that will check all checkboxes on/off. Does anyone have any idea what may be wrong?
<h2>Flip Scroll (Responsive Table)</h1>
<p>Works fine without "fieldset" element</p>
<table class="flipscroll clear">
<thead>
<tr>
<th class="center checkbox">
<label>
<input type="checkbox" name="checkall" class="checkall" />
</label>
</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Mario Rossi</td>
<td class="ellipsis"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_unread">512k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Jackie Angelica</td>
<td class="ellipsis"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_pp">256k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Penelope Stevens</td>
<td class="ellipsis"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_word">128k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Maria Gupta</td>
<td class="ellipsis"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_text">64k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Adeline Danica</td>
<td class="ellipsis"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_excel">32k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Johan Celestine</td>
<td class="ellipsis"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_read">16k</span></td>
</tr>
</tbody>
</table>
<h2 class="error">Flip Scroll (Responsive Table w/ Fieldset)</h1>
<p class="error">Breaks table when "fieldset" element is added around table</p>
<fieldset>
<table class="flipscroll clear">
<thead>
<tr>
<th class="center checkbox">
<label>
<input type="checkbox" name="checkall" class="checkall" />
</label>
</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Mario Rossi</td>
<td class="ellipsis"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_unread">512k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Jackie Angelica</td>
<td class="ellipsis"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_pp">256k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Penelope Stevens</td>
<td class="ellipsis"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_word">128k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Maria Gupta</td>
<td class="ellipsis"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_text">64k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Adeline Danica</td>
<td class="ellipsis"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_excel">32k</span></td>
</tr>
<tr>
<td class="center"><input type="checkbox" name="select"/></td>
<td class="ellipsis">Johan Celestine</td>
<td class="ellipsis"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></td>
<td class="ellipsis">12/12/2013</td>
<td class="ellipsis"><span class="attachment icon_read">16k</span></td>
</tr>
</tbody>
</table>
</fieldset>
<div class="mobile tablet screen"></div>
CSS
/*
==========================================================================
SCREEN MODE
========================================================================== */
body { background: #BFEEFC; padding: 1em 1em 5em; }
h1 { margin: 1em 0 0; }
h2 { margin: 1em 0 0; }
p { margin: .25em 0 1em; }
fieldset { table-layout: fixed; width: 100%; }
table { table-layout: fixed; width: 100%; background: white; }
table thead { background: #f2f2f2; border-bottom: 1px solid #ccc; }
table thead tr { }
table thead tr th { text-align: left; }
.flipscroll { width: 100%; }
.flipscroll tbody { overflow-y: hidden; }
/* Screen Style */
@media screen and (min-width: 64.063em) {
.screen { position: fixed; bottom: 0; left: 0;padding: .5em 1em; background: black; color: white; font-weight: bold; font-size: 1.7em; display: block; }
.screen:after { content: "Screen"; }
}
/*
==========================================================================
MOBILE MODE
========================================================================== */
@media screen and (min-width: 0) and (max-width: 64em) {
.mobile { position: fixed; bottom: 0; left: 0;padding: .5em 1em; background: black; color: white; font-weight: bold; font-size: 1.7em; display: block; }
.mobile:after { content: "Mobile"; }
/* Flip Scroll */
.featurecards .flipscroll { border-top: 0 !important; }
.flipscroll * { border: 0 !important; padding: 0 !important; position: relative; }
.flipscroll { background: #f2f2f2; border-left: 1px solid #cccccc !important; display: block; position: relative; width: 100%; border-collapse: collapse !important; border-spacing: 0 !important; border-top: 1px solid #cccccc !important; }
.flipscroll br { display: none; }
.flipscroll thead { display: block; float: left; width: 35%; min-width: 10em; }
.flipscroll thead tr { display: block; padding: 0 !important; }
.flipscroll thead tr th { text-align: left; display: block; text-align: left; white-space: nowrap; text-align: left; padding: .5em 1em !important; width: 100% !important; min-width: 100% !important; }
.flipscroll thead tr th div div { padding: .3em .5em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; box-sizing: border-box; }
.flipscroll tbody { background: white; display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; border-left: 1px solid #cccccc !important; }
.flipscroll tbody tr { display: inline-block; border-right: 1px solid #cccccc !important; }
.flipscroll tbody tr td { display: block; text-align: left !important; padding: .5em 1em !important; font-size: 1em !important; }
.flipscroll tbody tr td:after { content: "\00a0"; }
.flipscroll tbody tr td input[type="button"] { padding: .5em 1em !important; float: left !important; margin: 0 .5em 0 0; min-width: 7em; }
.error { color: red; }
}