Wymuś tabelę html na pojedynczą kolumnę składającą się tylko z css i bez javascript

Tworzę szablon HTML, który otacza tabelę używaną do utworzenia formularza. Mam pełną kontrolę nad html, który otacza tabelę, a nie samą tabelą. Tabela jest wstrzykiwana do mojego szablonu, zanim zostanie wysłana do klienta. Nie mam nad tym żadnej kontroli. Jedyną rzeczą, nad którą mam kontrolę, jest html, który owija tabelę i css.Wymuś tabelę html na pojedynczą kolumnę składającą się tylko z css i bez javascript

tabela jest tabelą dwie kolumny, które wygląda następująco:

<table> 
    <tr> 
    <td>Column 1</td> 
    <td>Column 2</td> 
    </tr> 
    <tr> 
    <td>this is column 1</td> 
    <td>this is column 2</td> 
    </tr> 
</table> 

------------------------------------------------- 
|Column 1     |Column 2   | 
------------------------------------------------- 
|this is column 1   |this is column 2 | 
-------------------------------------------------

Jednak wolałbym, gdybyśmy mogli pokazać je jako jeden ułożone kolumny.

---------------------------- 
|Column 1     | 
----------------------------- 
|this is column 1   | 
----------------------------- 
|Column 2     | 
----------------------------- 
| this is column 2   | 
-----------------------------

Czy istnieje sposób na osiągnięcie tego przy użyciu tylko css, bez javascript.

Źródło

2012-09-10 KJF

Czy masz już jakiś kod, którego próbowałeś? – Kyle

Owiń go w div zamiast tabeli, jeśli możesz zmienić zawijanie html - o wiele prostsze i bardziej solidne niż używanie do tego tabeli. – easwee

@KJF jak easwee sugeruje użycie div będzie lepsze niż tabela. – freebird

Nie, to nie jest rozsądnie możliwe bez zmiany znaczników. Tabele w formacie HTML mają strukturę , a nie jako kolumn. Na przykład dajesz jesteś ponownego zamawiania treści:

oryginalnej kolejności:
Column 1 -> Column 2 -> this-is-col-1 -> this-is-col-2

New Kolejność:
Column 1 -> this-is-col-1 -> Column 2 -> this-is-col-2

Dlaczego mówię „nie rozsądnie możliwy "? Cóż, dzięki absolutnemu pozycjonowaniu i podobnym technikom możesz być w stanie zhakować układ, który chcesz ze sobą połączyć - ale jest świat cierpienia z powodu CSS, ponieważ nie oczekuję, że to podejście będzie fajne na prawdziwej stronie.

Dodatkowa uwaga: Aby dodać do problemu „ponowne zamawianie”, coś, co może być nieco łatwiejsze do osiągnięcia byłoby to układ, w którym kolejność pozostaje taka sama:

---------------------------- 
|Column 1     | 
----------------------------- 
|Column 2     | 
----------------------------- 
|this is column 1   | 
----------------------------- 
| this is column 2   | 
-----------------------------

Ale to oczywiście nie jest to, czego chcesz.

Źródło

2012-09-10 09:13:43 Jeroen

warto dodać to do ciebie CSS:

td { 
    display: table-row; 
}

Cheers.

Źródło

2012-09-10 09:23:47 George

Chociaż jest to czyste rozwiązanie, IE nie wyświetli go. – easwee

Nod. Nie będzie działać, tzn. 7 lub mniej. :) – George

Nop - nie działa w żadnym IE - nawet 9. – easwee

Po prostu; Nie. Nie można zmienić wiersza w tabelę dwukolumnową w tabelę jednokolumnową bez użycia JavaScript.
Albo powiedz programistom tabeli, aby utworzyli tabelę w ten sposób, lub po prostu użyj JavaScript, aby zmienić strukturę tabeli.

Źródło

2012-09-10 09:32:31

Nie wspominając już o złym kodowaniu, jeśli użyli tabeli. – easwee

Możesz osiągnąć coś podobnego za pomocą display:block;.

Zobacz ten skrzypce: http://jsfiddle.net/R53KH/

Źródło

2012-09-10 09:43:52 starbeamrainbowlabs

rozwiązanie tylko mogę pomyśleć, to zmieniając znaczników. Zmienilbym to w taki sposób, aby wziąć jedną kolumnę i zapisać ją jako wiersz w znacznikach.Oto skrzypce, które stworzyłem: http://jsfiddle.net/MHsxU/

Źródło

2012-09-10 09:44:28

Nadal masz problemy i w Chrome?
Dla osób, które wciąż mają problemy (jak ja), sprawdź, czy w nagłówku dokumentu znajduje się <!DOCTYPE html>. Jeśli nie, Chrome zupełnie ignoruje wszystko, co dodasz i zachowa display: table-cell.

Źródło

2016-02-11 17:17:38 timtom

Byłem skonfrontowany z podobnym problemem ostatnio, jak się wydaje, & znalazłem dobre rozwiązanie. Tabele mają zły rap z powodu częstego niewłaściwego użycia, ale są rzeczywiście najtańszą opcją, gdy trzeba wyświetlić siatkę danych w okienku o zmiennej szerokości.

Odpowiedź na oryginalne pytanie nadal jest nr. Aby rozwiązać ten problem bez JavaScript, jeden musi być w stanie edytować znacznik tabeli.

Stoły mogą wyglądać ... dobrze ... gdy są rozciągnięte, ale wyglądają po prostu okropnie, gdy są zgniecione. Tabele "responsywne" są możliwe tylko poprzez dodanie znaczników kontekstowych do każdej komórki (np. span.label & span.data elementów). Możemy z łatwością ukryć ten nowy nadmiarowy wydruk domyślnie &, pokazując go tylko w stanie widoku elastycznego.

table.responsive td .label { 
 
    display: none; 
 
}

<table class="responsive"> 
 
    <thead> 
 
     <tr> 
 
      <th>Column Foo</th> 
 
      <th>Column Bar</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td><span class="label">Column Foo</span><span class="data">Baz</span></td> 
 
      <td><span class="label">Column Bar</span><span class="data">Qux</span></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Kiedy w reagującego stanu widoku, ukryć element thead & pokazać .label elementy.

table.responsive { 
 
    width: 100%; 
 
} 
 
table.responsive td .label { 
 
    display: none; 
 
} 
 

 
table.responsive th { 
 
    background-color: #ddd; 
 
} 
 

 
table.second { 
 
    margin-top: 5em; 
 
} 
 

 
@media screen and (max-width:640px) { 
 
    table.responsive thead { 
 
    display: none; 
 
    } 
 
    table.responsive tbody th, 
 
    table.responsive tbody td { 
 
    display: block; 
 
    } 
 

 
    table.responsive td span { 
 
    display: block; 
 
    } 
 
    table.responsive td .label { 
 
    background-color: #ddd; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    } 
 
}

Utworzyłem repo która obejmuje rozwiązania w sposób bardziej szczegółowy. Kliknij here, aby zobaczyć, jak to działa.

Źródło

2016-08-27 06:13:35 yesnoio

Wymuś tabelę html na pojedynczą kolumnę składającą się tylko z css i bez javascript

Odpowiedz

Powiązane problemy