Можно ли разбить строки HTML <table>с помощью CSS?

Question

Можно ли визуально отобразить строку таблицы на двух разных экранах с помощью CSS?

например:

<table>
    <tr>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
    </tr>
    <tr>
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
    </tr>
</table>

... отображается как:

___________
| A1      |
| A2 | A3 |
-----------
| B1      |
| B2 | B3 |
-----------

Answer 1

Структура, которую вы показываете в своем ascii art, на самом деле не является таблицей в обычном смысле - вы могли бы просто использовать структуру вложенных div.

Если вы настаиваете на этом с таблицей, вы можете изменить модель display и position ваших ячеек A1 / B1 и установить фиксированную ширину таблицы и ячеек, а затем переместить ячейки A1 / B1.

Answer 2

Вы можете попробовать взломать с display: block; float: left и фиксированной шириной, но тогда вы потеряете общую функциональность таблицы.

Answer 3

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

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

При этом я подвергаю сомнению намерение, выражаемое здесь. Если вы пытаетесь визуально предположить, что две ячейки «действительно» являются одной ячейкой, то вам следует рассмотреть возможность сделать это отношение явным, если это возможно, возможно, с th и rowspan. Почему вы подразумеваете что-то значимое в этих отношениях с визуальными агентами, но не с невизуальными агентами?

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

Answer 4

Возможно, прочитайте материал по макету гибкой коробки (flexbox) в CSS3:

http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/

http://caniuse.com/#feat=flexbox

Answer 5

Вы можете использовать

<tr>
<td colspan = "2">A1</td>
</tr>
<tr>
<td>A2</td><td>A3</td>
</tr>

Я предполагаю, что ваши A, B и т. Д. Действительно являются массивом, так что вы можете запустить цикл для создания ваших строк. Если вам нужен более общий способ разделения вещей, вы можете сохранить счетчик количества ячеек в данном ряду и перейти к следующему ряду, основываясь на модуле вашего счетчика. Например, если вы хотите разбить строку после каждых пяти элементов

<cfset i = 0>
  <cfloop array = #myarray# index = "col">
<tr>
<cfset i = i + 1>
<cfset j = i%5>  <!---this is i mod 5 --->
<td>#col# (or whatever is based on col) </td> 
<cfif j EQ 0>
</tr>
<tr>
</cfif>
</cfloop>  

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