在我的应用程序中,我有一个包含表数据的字段集。
表格可能有很多列。
所以,为了避免浏览器窗口出现水平滚动条,
我试图将表格包装到一个容器中,该容器具有 width: 100%
和 overflow: auto
。
那没用。字段集仍然大于浏览器的内部宽度,导致出现滚动条。我尝试将 width: 100%
应用于 fieldset
。即使 position: absolute
和 left:0;right:0;
也不起作用。
后来又试了几次,又加了min-width
和max-width
,好像可以了。嗯,它适用于 Chrome、Internet Explorer 和 Opera。但在 Firefox 中不是。
在 Firefox 中,似乎无法将字段集的宽度限制为主体宽度。有办法解决这个问题吗?
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 1em;
}
fieldset {
width: 100%;
max-width: 100%;
min-width: 100%;
overflow: auto;
}
table {
display: block;
width: 290em;
table-layout: fixed;
border-collapse: collapse;
}
table input {
border: 1px solid transparent;
width: 100%;
}
td,
th {
border: 1px solid black;
width: 10em;
}
.container {
width: 100%;
overflow: auto;
}
<fieldset>
<legend>
Table Data
</legend>
<div class="container">
<table>
<tr>
<th>Year 2001</th>
<th>Year 2002</th>
<th>Year 2003</th>
<th>Year 2004</th>
<th>Year 2005</th>
<th>Year 2006</th>
<th>Year 2007</th>
<th>Year 2008</th>
<th>Year 2009</th>
<th>Year 2010</th>
<th>Year 2011</th>
<th>Year 2012</th>
<th>Year 2013</th>
<th>Year 2014</th>
<th>Year 2015</th>
<th>Year 2016</th>
<th>Year 2017</th>
<th>Year 2018</th>
<th>Year 2019</th>
<th>Year 2020</th>
<th>Year 2021</th>
<th>Year 2022</th>
<th>Year 2023</th>
<th>Year 2024</th>
<th>Year 2025</th>
<th>Year 2026</th>
<th>Year 2027</th>
<th>Year 2028</th>
<th>Year 2029</th>
<th>Year 2030</th>
</tr>
<tr>
<td>
<input value="Val 1">
</td>
<td>
<input value="Val 2">
</td>
<td>
<input value="Val 3">
</td>
<td>
<input value="Val 4">
</td>
<td>
<input value="Val 5">
</td>
<td>
<input value="Val 6">
</td>
<td>
<input value="Val 7">
</td>
<td>
<input value="Val 8">
</td>
<td>
<input value="Val 9">
</td>
<td>
<input value="Val 10">
</td>
<td>
<input value="Val 11">
</td>
<td>
<input value="Val 12">
</td>
<td>
<input value="Val 13">
</td>
<td>
<input value="Val 14">
</td>
<td>
<input value="Val 15">
</td>
<td>
<input value="Val 16">
</td>
<td>
<input value="Val 17">
</td>
<td>
<input value="Val 18">
</td>
<td>
<input value="Val 19">
</td>
<td>
<input value="Val 20">
</td>
<td>
<input value="Val 21">
</td>
<td>
<input value="Val 22">
</td>
<td>
<input value="Val 23">
</td>
<td>
<input value="Val 24">
</td>
<td>
<input value="Val 25">
</td>
<td>
<input value="Val 26">
</td>
<td>
<input value="Val 27">
</td>
<td>
<input value="Val 28">
</td>
<td>
<input value="Val 29">
</td>
<td>
<input value="Val 30">
</td>
</tr>
</table>
</div>
</fieldset>
最佳答案
我最终采用了以下解决方法:
当我用 section
和 h3
替换 fieldset
和 legend
时,表格按预期呈现滚动条。为了使该部分看起来像字段集,我定义了一个 .fieldset
类。这可能是这样的:
.fieldset {
border: 1px solid silver;
display: block;
position: relative;
margin-top: 1em;
padding: 1em;
}
.fieldset > h3 {
position: absolute;
background-color: white;
font-weight: normal;
font-size: 0.8em;
padding: 0;
margin: 0;
top: -0.5em;
}
/* content styling, not relevant to the workaround */
label {
display: block;
}
<section class="fieldset">
<h3>Fieldset legend</h3>
<!-- some content -->
<p>
<label>Foo</label>
<input />
</p>
<p>
<label>Bar</label>
<input />
</p>
<p>
<label>Baz</label>
<input />
</p>
</section>
但是,我真的很喜欢 fieldset
和 legend
背后的语义,可以在命名区域内对复杂 Web 表单的元素进行分组——这正是 fieldset 的用途(参见 MDN ).
此外,我不想更改 html 结构,因为它应该很容易还原为简单的字段集。所以我想出了一个服务器端解决方案,可以在 DOM 树中搜索字段集,并用我的假字段集替换它们。这种方法的替代方法是使用模板引擎的功能,例如。 jade 中的“mixins”。在我的特定用例中,用 DOM 操作库替换标签更容易,因为 html 代码必须可以使用所见即所得的编辑器进行编辑。
关于html - 字段集中带有水平滚动条的表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26892475/