Таблица с горизонтальной полосой прокрутки внутри поля

Question

В моем приложении у меня есть набор полей, содержащий данные таблицы.

В таблице может быть много столбцов. Итак, во избежание появления окна браузера горизонтальная полоса прокрутки, Я попытался обернуть таблицу в контейнер с помощью 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>

Answer 1

Я закончил с следующим обходного:

Когда я заменить 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 к группе элементам сложной веб-формы в пределах названных областей - это именно то, что fieldsets были сделано для (см. MDN).

Кроме того, я не хотел изменять структуру html, потому что это должно быть легко вернуться к простым полям. Поэтому я придумал решение на стороне сервера, которое ищет дерево DOM для полей и заменяет их своими поддельными полями. Альтернативой этому подходу было бы использование функций механизма шаблонов, например. «mixins» в jade. В моем конкретном случае использования было проще заменить теги библиотекой манипуляций DOM, потому что код html должен быть доступен для редактирования с помощью редактора WYSIWYG.