2011-11-03 6 views
29

Oto mój problem: Mam tabelę HTML, który wygląda tak:Wiersze tabeli HTML - jak stworzyć unikalną komórkę o szerokości 100%? (Przy zrzucie wyjaśnienie)

HTML Table

Co chcę jest aby istniał dodatkowy wiersz tabeli pod nią, z wyjątkiem tego rząd rozciąga pełna szerokość stołu - ale z tylko jedna komórka. I szybko wyśmiewali się przykładem:

table

Jak widać dodałem kolejny wiersz tabeli poniżej niej za pomocą jednego <td> wewnątrz komórki zawierającej tekst. Jednak chcę, aby ta komórka obejmowała 100% szerokości całej tabeli - nie powinna zmieniać rozmiaru kolumny "Nazwa".

Czy coś takiego jest możliwe? Z przyjemnością korzystam z jQuery lub JavaScript, jeśli zajdzie taka potrzeba - również nie musi to działać w IE, ponieważ każdy użytkownik używa Chrome (chociaż byłby to profit).

Jack

Odpowiedz

59

W twoim przypadku, można by zrobić coś takiego

<tr> 
    <td colspan="5">This text should be as long as the entire table's width...</td> 
</tr> 

Atrybut colspan mówi ile kolumn komórka powinna trwać. Powinien działać we wszystkich przeglądarkach obsługujących tabele, ponieważ jest to standardowy HTML.

W języku JavaScript należy ustawić właściwość colSpan komórki lub zadzwonić pod numer .setAttribute("colspan", the_number_of_columns). Powinno działać. Ale jeśli nie dynamicznie generujesz komórkę, powinieneś po prostu dołączyć do kodu HTML atrybut colspan.

+0

doskonały - dziękuję! Nie natknąłem się na stoły po tym, jak dowiedziałem się o ich ogólnej nienawiści od programistów - do tej pory, kiedy musiałem wyświetlać dane tabelaryczne :-) – Jack

+4

Tabele same w sobie nie są złe. W rzeczywistości są całkiem dobre dla tego, do czego są stworzone. Jeśli kiedykolwiek usłyszysz, że ktoś mówi ci, że wszystkie stoły są złe, możesz być pewny, że jest on kultystą ładunków i nie zna WTF, o którym mówią. :) To jest * tabele układów * - używanie tabel do pozycjonowania rzeczy zamiast trzymania tabelarycznych danych - które są złe. (Nadal bardzo rzadko konieczne, ale zło nawet wtedy.) – cHao

13

Na jedną komórkę, aby obejmowały wszystkie 5 kolumn,

<td colspan="5">Lorem Ipsum</td> 
+1

Dziękuję - to się udało! – Jack

+2

Napisałeś "Lorem" niepoprawny: D –

Powiązane problemy