Сделать стек таблицы на мобильном устройстве только с css [duplicate]

Я опоздал с ответом на этот вопрос, но на данный момент нет ни одного разумного ответа, несмотря на то, что это популярный вопрос с высокоподдерживаемыми ответами ....

Лучшая практика: вперед Заголовки заголовков

Как проиллюстрировано заголовком <iosfwd> стандартной библиотеки, правильный способ предоставления форвардных объявлений для других должен иметь заголовок forward declare . Например:

a.fwd.h:

#pragma once
class A;

ah:

#pragma once
#include "a.fwd.h"
#include "b.fwd.h"

class A
{
  public:
    void f(B*);
};

b.fwd.h:

#pragma once
class B;

bh:

#pragma once
#include "b.fwd.h"
#include "a.fwd.h"

class B
{
  public:
    void f(A*);
};

Составители библиотек A и B должны отвечать за сохранение заголовков своих прямых деклараций в соответствии с их заголовками и файлами реализации, поэтому - для Например, если сопровождающий «B» входит и перезаписывает код, который должен быть ...

b.fwd.h:

template <typename T> class Basic_B;
typedef Basic_B<char> B;

bh:

template <typename T>
class Basic_B
{
    ...class definition...
};
typedef Basic_B<char> B;

... тогда перекомпиляция кода для «А» будет вызвана изменениями к включенному b.fwd.h и должна завершиться чисто.


Плохая, но обычная практика: вперед объявить материал в других libs

Произнести - вместо использования заголовка прямого объявления, как описано выше, - код в a.h или a.cc вместо forward-declares class B;:

  • , если a.h или a.cc позже включили b.h: компиляция A завершится с ошибкой после того, как она попадет в противоречивую декларацию / определение B (т. е. вышеуказанное изменение на B сломало A и любое другой c лижет злоупотребление форвардными декларациями, вместо того, чтобы работать прозрачно).
  • в противном случае (если A в конечном итоге не включал b.h - возможно, если A просто хранит / передает Bs с помощью указателя и / или ссылки), инструменты построения, основанные на анализе #include и измененные временные метки файлов, t перестроить A (и его далее зависимый код) после изменения на B, вызывая ошибки во время соединения или времени выполнения. Если B распределяется как загруженная DLL во время выполнения, код в «A» может не отображать символы с разными причинами во время выполнения, которые могут обрабатываться или не обрабатываться достаточно хорошо, чтобы инициировать упорядоченное завершение работы или приемлемую сокращенную функциональность.

Если код А имеет специализированные шаблоны / «признаки» для старого B, они не вступят в силу.

6
задан KJF 10 September 2012 в 10:03
поделиться

8 ответов

Нет, это не возможно разумно без изменения разметки. Таблицы в HTML структурированы как rows , а не как столбцы . В примере, который вы указали, вы переупорядочиваете контент:

Исходный порядок: Column 1 -> Column 2 -> this-is-col-1 -> this-is-col-2

Новый порядок: Column 1 -> this-is-col-1 -> Column 2 -> this-is-col-2

Почему я сказать «не разумно возможно»? Ну, с абсолютным позиционированием и подобными приемами вы можете взломать макет, который хотите вместе, но есть мир ожидания CSS, потому что я не ожидаю, что этот подход будет играть на реальной странице.

< hr>

. Дополнительное примечание. Чтобы добавить к проблеме «переупорядочения», что-то, что может быть немного легче выполнить, будет такой макет, где порядок остается прежним:

----------------------------
|Column 1                   |
-----------------------------
|Column 2                   |
-----------------------------
|this is column 1           |
-----------------------------
| this is column 2          |
-----------------------------

Но это явно не то, что вы хотите.

1
ответ дан Jeroen 1 September 2018 в 04:11
поделиться

Единственное решение, о котором я могу думать, это изменение вашей разметки. Я бы изменил его таким образом, чтобы взять один столбец и записать его как строку в разметке. Вот скрипка, которую я создал: http://jsfiddle.net/MHsxU/

0
ответ дан Amandeep Jiddewar 1 September 2018 в 04:11
поделиться

Попробуйте добавить это к вам CSS:

td {
  display: table-row;
}

Приветствия.

12
ответ дан George 1 September 2018 в 04:11
поделиться

На самом деле, это невероятно просто (и может быть сделано с двумя строками css): Сделайте свою ширину td 100% и установите переполнение: auto. Ваш второй столбец автоматически обернется.

0
ответ дан Jess 1 September 2018 в 04:11
поделиться
[Д0] & NBSP; & NBSP; & NBSP; Просто; Нет. Вы не можете превратить строку в таблицу с двумя столбцами в таблицу с одним столбцом без какого-либо JavaScript. & NBSP; & NBSP; & NBSP; Либо скажите кодировщикам таблицы создать таблицу таким образом, либо просто используйте JavaScript для переструктурирования таблицы.

3
ответ дан Kneel-Before-ZOD 1 September 2018 в 04:11
поделиться

Вы можете добиться чего-то подобного, используя display:block;.

См. эту скрипту: http://jsfiddle.net/R53KH/

0
ответ дан starbeamrainbowlabs 1 September 2018 в 04:11
поделиться

По-прежнему возникают проблемы и в Chrome? Для тех, у кого еще есть проблемы (например, я), проверьте, что у вас есть <!DOCTYPE html> в начале вашего документа. Если вам не кажется, что Chrome полностью игнорирует все, что вы добавляете, и сохраняйте display: table-cell.

0
ответ дан timtom 1 September 2018 в 04:11
поделиться

Я столкнулся с аналогичной проблемой недавно & amp; похоже, нашли хорошее решение. Таблицы имеют плохой рэп из-за частого неправильного использования, но на самом деле это самый скудный вариант, когда нужно отображать сетку данных в окне просмотра переменной ширины.

Ответ на оригинальный вопрос все еще нет. Чтобы решить эту проблему без JavaScript, один должен иметь возможность редактировать разметку таблицы.

Таблицы могут выглядеть ... хорошо ... когда они растянуты широко, но выглядят просто ужасно, когда хлюпал. «Реагирующие» таблицы возможны только путем добавления контекстной разметки в каждую ячейку (например, span.label и span.data). Мы можем с легкостью скрыть этот новый избыточный вывод по умолчанию & amp; (g2)

table.responsive td .label {
  display: none;
}
<table class="responsive">
    <thead>
        <tr>
            <th>Column Foo</th>
            <th>Column Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="label">Column Foo</span><span class="data">Baz</span></td>
            <td><span class="label">Column Bar</span><span class="data">Qux</span></td>
        </tr>
    </tbody>
</table>

Если в состоянии отзывчивого просмотра скрыть элемент thead & амп; показать .label.

table.responsive {
  width: 100%;
}
table.responsive td .label {
  display: none;
}

table.responsive th {
  background-color: #ddd;
}

table.second {
  margin-top: 5em;
}

@media screen and (max-width:640px) {
  table.responsive thead {
    display: none;
  }
  table.responsive tbody th,
  table.responsive tbody td {
    display: block;
  }

  table.responsive td span {
    display: block;
  }
  table.responsive td .label {
    background-color: #ddd;
    font-weight: bold;
    text-align: center;
  }
}

Я создал репозиторий , который покрывает решение в большем подробно. Нажмите здесь , чтобы увидеть, как он работает.

0
ответ дан yesnoio 1 September 2018 в 04:11
поделиться