css 字段集中带有水平滚动条的表

vktxenjb 于 2023-04-13 发布在其他

关注(0)|答案(2)|浏览(116)

在我的应用程序中，我有一个包含表数据的字段集。
这个表可能有很多列，所以为了避免浏览器窗口出现水平滚动条，我尝试用width: 100%和overflow: auto将这个表 Package 到一个容器中。
这不起作用。字段集仍然大于浏览器的内部宽度，导致滚动条。我尝试将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>

css

来源：https://stackoverflow.com/questions/26892475/table-with-horizontal-scrollbar-inside-a-fieldset

2条答案

按热度按时间

bhmjp9jg1#

最后，我采用了以下解决方案：
当我将fieldset和legend替换为section和h3时，表会按照预期的方式呈现滚动条。为了使部分看起来像字段集，我定义了一个.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表单的元素分组在命名区域中--这正是字段集的用途（请参阅MDN）。
此外，我不想改变html结构，因为它应该很容易恢复到简单的字段集。所以我想出了一个服务器端的解决方案，搜索DOM树的字段集，并用我的fake-fieldsets替换它们。这种方法的替代方案是使用模板引擎的功能，例如。jade中的“mixins”。在我的特定用例中，用DOM操作库替换标签更容易，因为html代码必须可以用WYSIWYG编辑器编辑。

赞(0）回复(0）举报 2023-04-13

cl25kdpy2#

将'min-width: inherit'属性添加到fieldset使其工作。

赞(0）回复(0）举报 2023-04-13