Адаптивная таблица со 100% шириной

Вот код:

<div class="row">
  <div class="large-12 columns">

    <table class="scroll wide">

      <tr>
        <td>First</td>
        <td>Second</td>
        <td>Third</td>
        <td>Forth</td>
      </tr>

    </table>

  </div>
</div>

CSS

.wide { width: 100%; }

Вот скрипка:

https://jsfiddle.net/emilcieslar/zc37ydys/

Как видите, есть 4 столбца и класс прокрутки, который делает таблицу прокручиваемой, когда ширина страницы меньше ширины таблицы. Однако, если я хочу сделать ширину таблицы равной 100%, она останется прежней, не растянется. Я вижу, что сама табличка растягивается, но внутренности не растягиваются. Это вызвано тем, что таблица является display: block, однако она должна быть display: block, иначе она не будет прокручиваться (по горизонтальной оси). Как я могу добиться ширины таблицы 100%, оставаясь при этом отзывчивым?


html css zurb-foundation zurb-foundation-6
person emil.c    schedule 18.01.2016    source источник
comment
Это сделало бы все td одинаковой ширины, что нежелательно, так как некоторые из них должны быть пропорционально меньше, поскольку они могут содержать меньше контента, чем другие. Я обновил скрипку, чтобы было более очевидно, что я имею в виду. Первый столбец намного меньше остальных столбцов.   -  person emil.c    schedule 18.01.2016
comment
Кто бы ни задал этот вопрос и ответил на один, пожалуйста, по крайней мере, дайте комментарий.   -  person emil.c    schedule 08.02.2016
comment
Я искал решение этой проблемы в течение нескольких дней. @Aibrean — единственный человек, у которого есть действительно работающее решение. Спасибо!!!   -  person Brandon Dyer    schedule 06.12.2019

Ответы (1)


arrow_upward
7
arrow_downward

Как говорится, думай нестандартно, поэтому я придумал нестандартный стол и завернул стол внутрь контейнера:

<div class="horizontal-scroll">
  <table class="my-table"><!-- without scroll class now -->
  ...
  </table>
</div><!-- /horizontal-scroll -->

с CSS:

.horizontal-scroll {
  overflow: hidden;
  overflow-x: auto;
  clear: both;
  width: 100%;
}

.my-table {
  min-width: rem-calc(640);
}

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

person emil.c    schedule 20.01.2016
comment
Эй, Эмиль. У меня такая же проблема ! что это за rem-calc(640)? это размер стола до растяжения? - person estellechvl; 14.03.2018
comment
@EstelleChvl Это минимальная ширина таблицы. Он не должен уменьшаться ниже этого числа, фактическое значение зависит от вас, но вы должны установить min-width, иначе оно полностью уменьшится. rem-calc — функция полезности от Foundation. - person emil.c; 15.03.2018