Создание DIVs действует как таблица с использованием CSS

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

<div class="table">
  <div class="tr">
    <div class="td">Row 1, Cell 1</div>
    <div class="td">Row 1, Cell 2</div>
    <div class="td">Row 1, Cell 3</div>
  </div>
  <div class="tr">
    <div class="td">Row 2, Cell 1</div>
    <div class="td">Row 2, Cell 2</div>
    <div class="td">Row 2, Cell 3</div>
  </div>
</div>

Вот как выглядит CSS.

div.table {border: 1px solid black; display: table; }
div.tr {border: 1px solid black; display: table-row; }
div.td {border: 1px solid black; display: table-cell; }

Я хотел бы, чтобы страница выглядела так, как будто была использована таблица, но все "ячейки" переходят в новую строку. Любые мысли?

Ответы

Ответ 1

Странно: то, что вы цитируете, выглядит прекрасно и должно работать. Вы уверены, что нет переопределения display: block !important где-то?

Но, как мое мнение, я собираюсь сказать, что для любви к Богу просто используйте стол.:)

Серьезно. Основной аргумент не использовать таблицы в таких ситуациях состоит в том, что они не являются правильным элементом семантически. Но, глядя на этот суп-суп, вы должны признать, что <table> - это более предпочтительная конструкция, даже если это не точно табличные данные, которые вы показываете.

Ответ 2

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

Ваша проблема проста... ваши элементы ячейки являются div и поэтому отображаются: block, используют пробелы вместо них для ячеек таблицы (или добавляют отображение: inline к CSS.cell).

<div class="table">
  <div class="tr">
    <span class="td">Row 1, Cell 1</span>
    <span class="td">Row 1, Cell 2</span>
    <span class="td">Row 1, Cell 3</span>
  </div>
  <div class="tr">
    <span class="td">Row 2, Cell 1</span>
    <span class="td">Row 2, Cell 2</span>
    <span class="td">Row 2, Cell 3</span>
  </div>
</div>

Ответ 3

Возможно, проблема с браузером? Ваш код работает для меня в Chrome. См. Здесь: http://jsfiddle.net/xVTkP/

Что вы используете?

(но серьезно, как говорят другие, используйте таблицу)

Ответ 4

Наступает момент, когда вам нужно спросить себя: "Это действительно стоит?" Это одна из тех ситуаций, когда это не так.

Ответ 5

Какой браузер вы используете? Эти значения полностью не реализованы во всех браузерах. Тем не менее, , что точка пытается подражать таблицам с divs + CSS? Почему бы просто не использовать таблицу?

Создатели HTML обычно избегают использования таблиц для данных, которые не являются табличными из-за раннего (где-то за последние 10 лет? не помню) люфта, вызванного чрезмерным использованием таблиц в качестве элементов макета. Подумайте: вложенные таблицы в вложенных таблицах, пустые ячейки только для заполнения и т.д. Получить с ней. Используйте элемент, который выполняет задание.

Лично я считаю, что table, table-row, table-cell и т.д. должны были быть исключены из спецификации CSS display.

Ответ 6

<body>
    <div style="display: table;">
        <div style="display: table-row;">
            <div style="display: table-cell;">Row 1, Cell 1</div>
            <div style="display: table-cell;">Row 1, Cell 1</div>
            <div style="display: table-cell;">Row 1, Cell 1</div>
        </div>
        <div style="display: table-row;">
            <div style="display: table-cell;">Row 2, Cell 1</div>
            <div style="display: table-cell;">Row 2, Cell 1</div>
            <div style="display: table-cell;">Row 2, Cell 1</div>
        </div>
    </div>
</body>