Zagnieżdżone wiersze tabeli HTML CSS

Nigdy nie pracowałem zbyt długo nad złożonymi tabelami HTML. Potrzebuję tabeli z zagnieżdżonymi kolumnami i wierszami. Próbowałem go stworzyć, ale ma wiele tabel, a liczba granic pojawia się wszędzie. Tutaj jest jsFiddle, którego próbowałem. Więc, co mam zamiar osiągnąć to:Zagnieżdżone wiersze tabeli HTML CSS

pojedyncze <table> tag dla całej tej struktury
Wiele granice nie powinny się pojawić.
Cała konstrukcja powinna być pojedyncza tabela, wiersze nie należy oddzielić od jego położenia podczas zmiany rozmiaru strony. (Co zdarza się w moim przypadku)

Źródło

2015-04-21 trex

Tylko z cursiosity: co starasz się osiągnąć z tej struktury? Wydaje mi się, że używasz go do stylizowania złożonych komórek tabeli? – thomaux

@Anzeo - Tak, to wymaga klientów. Dał png, pokazując tego rodzaju strukturę w tabeli. – trex

@trex Nie powinieneś używać tabel do układów (szablony wiadomości e-mail są w porządku) Aby uzyskać układ podobny do tabeli, spójrz na bootstrap. Dla Twojego problemu: nie dostaniesz daleko za pomocą pojedynczego tagu

, nie możesz umieścić wewnątrz

bez konieczności stawiania – AlexG

Odpowiedz

To twoja struktura chciał, nie ustawić szerokość na wartość procentową, aby uniknąć utraty struture kształt natomiast strona rozmiaru

<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>

Źródło

2015-04-21 09:38:51

- Idealne rozwiązanie! Dzięki. Tak więc była to tylko gra 'rowspan' i' colspan'. Mam nowe rzeczy do nauki. Wielkie dzięki :) – trex

Serdecznie zapraszamy :) –

potem trzeba zrobić tabelę globalną z rzędu dla każdego wiersz, który masz. A wewnątrz komórek tych wierszy ustaw kolejną tabelę, aby nadać jej styl.

Mówisz, że wiele ramek nie powinno się pojawić, a następnie spraw, aby klasa pokazywała tylko granice tabel wewnątrz każdej komórki, a nie na innych, w ten sposób będziesz miał tylko żądane granice.

Należy pamiętać, że tabela globalna musi zawierać wszystkie pozostałe tabele. Jedna tabela zawiera wszystko.

W twoim bieżącym kodzie masz wiele oddzielnych tabel, aby struktura wierszy tak siłą, że nie wyrenderuje się dobrze.

Źródło

2015-04-21 09:08:34 Joze

Próbowałem, ale nie mogłem sformatować go zgodnie z moim wymaganiem. – trex

@trex jaki dokładnie jest wymóg? Zrobiłem to wcześniej (nie bez problemów), ale jest to zdecydowanie możliwe. Zwłaszcza w przypadku biuletynów. – Joze

Tylko stolik z tą strukturą. To ma kilka pól wejściowych w ostatniej kolumnie, które należy zapisać w bazie danych. – trex

Dlaczego miałby chcieć takiego stołu? Rzuć mu kamień.

W każdym razie nie używaj border: xx xxx xxx staraj się zawsze używać border-bottom, border-right, aby zminimalizować liczbę linii.

Dodaj intermitent koloru tła i po najechaniu, może to uczyni go bardziej akceptowalnym.

Inaczej, nie wiem. modlić się.

Źródło

2015-04-21 09:20:04

Dzięki za sugestię. Spróbuję go zaktualizować. – trex

dobrze, dokładny wynik nie może odbywać się tylko z jednej tabeli. Masz komórki, które pojawiają się na połowie wysokości lub szerokości innej komórki. To nie będzie działać.

Więc zrobiłem wam tę strukturę, która przychodzi tak blisko, jak to robi:

<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

Źródło

2015-04-21 10:09:05 LinkinTED

Twoje rozwiązanie również brzmi dobrze. Tak jak ciekawość, co robi w tym przypadku 'span =" 2 "'? – trex

Za pomocą 'colgroup' i' col' możesz definiować style kolumn. Tak więc "" oznacza, że kolumny powinny mieć szerokość 3% i powinny rozciągać się na dwie kolumny, w tym przypadku pierwsze dwie kolumny. – LinkinTED

@ LinkinTED- OK, mam cię! Dzięki – trex

Powiązane problemy