Если вы не хотите использовать рамку, то пристегнитесь к очень занятому документу.Одна из причин, по которой мне не нравятся бутстрапоподобные фреймворки, зависит от сотен различных встроенных классов.
Foundation 2.2 описывает столбцы для таблиц следующим образом:
На верхнем уровне столбец представляет собой <th> с классом .columns.
Внутри<th> - это другая полная таблица .Содержимое вашей колонки находится внутри <th>.Прямо под заголовком таблицы должен быть еще один <th> с классом .expander.Этот пустой элемент помогает развернуть столбец до полной ширины на маленьких экранах.
По сути, вы собираетесь делать много вложений.Структура будет выглядеть примерно так в соответствии с Foundation 2.2:
<th class="columns">
<table>
<tr>
<th>CONTENT HERE</th>
<th class="expander"></th>
</tr>
</table>
</th>
...repeat...
Однако, в ваших конкретных обстоятельствах вам нужно обернуть их в ряд, потому что строки Foundation обрабатывают столбцы:
Строка <table> с <tbody> и <tr>.Внутри этого <tr> вы разместите каждый отдельный столбец.<table> также имеет класс .row.
Таким образом, вы получите точку, к сожалению, больше вложенности.Чтобы ответить на вопрос, в частности, используя то, что, я думаю, является структурой, в которой задокументировано , вам потребуется создать 1 строку для каждого уровня.То есть, плитки 1 и 2 имеют свои ряды, плитки 3, 4 и 5 имеют свои собственные и так далее.Это дает вам гибкость остальных их встроенных классов стилей и выравнивания классов, поскольку вы будете делать это «базовым» способом, что бы это ни значило.
Теперь при тестировании я не видел ни одногоНеблагоприятные осложнения при исключении класса .expander, но, поскольку они рекомендуют его использовать, я бы просто использовал его в соответствии с их рекомендациями.
Вот исправленный фрагмент кода: https://codepen.io/anon/pen/BxgXJZ
РедакцияЯ сделал выделен красным, чтобы показать границы и белым, чтобы показать содержимое для быстрого наглядного пособия.Стилизация и выравнивание Я оставлю до рамок вашего проекта.Это отзывчивый подход, так как ваши классы включены для него.
В случае с link-rot вот фрагмент кода:
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-6 columns">
<table>
<tr>
<th>TILE 1</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-6 columns">
<table>
<tr>
<th>TILE 2</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 3</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 4</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 5</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-8 columns" >
<table>
<tr>
<th>TILE 6</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 7</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>