HTML-таблица с горизонтальной прокруткой

Question

У меня есть таблица внутри таблицы, я хочу, чтобы внешняя таблица всегда была на 100% от ширины родительского элемента без горизонтальной прокрутки, а затем во внутренней таблице была горизонтальная полоса прокрутки (только если он имеет достаточно столбцов, которые ему нужны).

Вот пример, который заставляет элемент html прокручиваться и растягивает внешнюю таблицу, это нехорошо.

Fiddle:https://jsfiddle.net/w31Lhe8w/6/

Когда вы показываете внутреннюю таблицу, которую вы видите его растянуть внешнюю таблицу, и когда она скрыта внешняя таблица соответствует его родителю совершенно без какой-либо прокрутки. В идеале, сохранение html одинаково (за исключением некоторых классов css, конечно) было бы лучше, так как этот html - это то, что лучше всего работает в моем проекте. Однако любое решение может быть полезным.

Спасибо.

Answer 1

Вот один из способов сделать это.

Во-первых, добавьте position: relative к охватывающему td элемента:

<td colspan="6" style="position: relative;"> 

Вы затем применить новое правило CSS к охватывающему div:

<div class="innertable"> 

следующим образом:

.innertable { 
    border: 1px dotted blue; 
    overflow: auto; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 

Это, похоже, очень хорошо работает для одного или нескольких строки внутренней таблицы.

См скрипку по адресу: https://jsfiddle.net/audetwebdesign/c7o3f0mp/