Вложенные строки таблицы HTML CSS

Я никогда не работал с сложными таблицами HTML. Мне нужна таблица с вложенными столбцами и строками в ней. Я попытался создать его, но у него много таблиц, а количество границ появилось повсюду. Вот jsFiddle, что я пробовал. Итак, что я собираюсь достичь, это:Вложенные строки таблицы HTML CSS

Single <table> тег для всей этой структуры
Множественные границы не должны появляться.
Вся структура должна быть одна таблица, строки не должны отделяться от его положения при изменении размера страницы. (Что происходит в моем случае)

источник

2015-04-21 trex

Просто из cursiosity: что вы пытаетесь достичь с помощью этой структуры? Мне кажется, вы используете его для создания сложных ячеек таблицы? – thomaux

@ Андзео - Да, это требование клиентов. Он дал png, показывающий такую структуру в таблице. – trex

@trex Вы не должны использовать таблицы для макетов (шаблоны электронной почты в порядке). Для табличного макета посмотрите на загрузку. Для вашей проблемы: вы не получите далеко с одним тегом

, вы не можете положить внутри

без – AlexG

ответ

Это ваша структура вы хотите, не установить ширину процентное значение, чтобы избежать потери формы то структура, пока страница изменения размера

<table border="1" width="800" height="100"> 
     <tr> 
     <th colspan="7"></th> 
     <th></th> 
     </tr> 
     <tr> 
     <td colspan="7"></td> 
     <td></td> 
     </tr> 
     <tr> 
     <td rowspan="3"></td> 
     <td></td> 
     <td colspan="3"></td> 
     <td></td> 
     <td colspan="2"></td> 
     </tr> 
     <tr> 
     <td rowspan="2"></td> 
     <td rowspan="2"></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td colspan="2"></td> 
     </tr> 
     <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td colspan="2"></td> 
     </tr> 
    </table>

источник

2015-04-21 09:38:51

- Идеальное решение! Благодарю. Так что это была игра 'rowspan' и' colspan'. Есть новые вещи, чтобы учиться. Много спасибо :) – trex

Добро пожаловать :) –

Тогда вы должны сделать глобальную таблицу со строкой для каждого который у вас есть. И внутри ячеек этих строк делают другую таблицу, чтобы ее стиль, как вы хотите.

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

Помните, что глобальная таблица должна содержать все остальные таблицы. В одной таблице есть все.

В вашем текущем коде у вас есть несколько таблиц, разделенных так, чтобы структура строк была принудительно удалена.

источник

2015-04-21 09:08:34 Joze

Я пробовал, но я не мог отформатировать его в соответствии с моим требованием. – trex

@trex, что именно является требованием? Я сделал это раньше (не без проблем), но это определенно возможно. Специально в случае информационных бюллетеней. – Joze

Просто таблица с этой структурой. У этого есть некоторые поля ввода в последнем столбце, которые необходимо сохранить в базе данных. – trex

Зачем ему нужен такой стол? Бросай ему камень.

Anyways, не используйте border: xx xxx xxx старайтесь всегда использовать border-bottom, border-right, поэтому вы минимизируете количество линий там.

Добавить фоновый цвет intermitent и на hover efects, возможно, это сделает его более приемлемым.

Else, я не знаю. молись.

источник

2015-04-21 09:20:04

Спасибо за предложение. Я попытаюсь обновить его. – trex

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

Так что я сделал вам эту структуру, которая приходит так близко, как он получает:

<table> 
    <colgroup> 
     <col width="3%" span="2" /> 
     <col width="10%" /> 
     <col width="3%" /> 
     <col width="18%" /> 
     <col width="*" span="2" /> 
    </colgroup> 
    <tr> 
     <td colspan="6">x</td> 
     <td>x</td> 
    </tr> 
    <tr> 
     <td colspan="6">x</td> 
     <td>x</td> 
    </tr> 
    <tr> 
     <td rowspan="3">x</td> 
     <td>x</td> 
     <td colspan="3">x</td> 
     <td>x</td> 
     <td>x</td> 
    </tr> 
    <tr> 

     <td rowspan="2">x</td> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
    </tr> 
    <tr> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
    </tr> 
</table>

Updated Fiddle

источник

2015-04-21 10:09:05 LinkinTED

Ваше решение также звучит хорошо. Как любопытство, что делает 'span =" 2 "' в этом случае? – trex

С 'colgroup' и' col' вы можете определять стили для столбцов. Таким образом, '

' означает, что количество столбцов должно быть 3% ширины, и оно должно охватывать два столбца, в этом случае первые два столбца. – LinkinTED

@ LinkinTED- Хорошо, ты! благодаря – trex

Смежные вопросы