Dodawanie tekstu do pustej komórki tabeli zmienia jej szerokość.

Question

Czy ktoś może wyjaśnić, co się tutaj dzieje? http://jsfiddle.net/BeQmw/2

Mam dwie tabele, każda z dwoma rzędami i dwiema komórkami. Każda komórka ma różne kolory tła, dzięki czemu możesz zobaczyć ich szerokości. Jedyna różnica między dwiema tabelami polega na tym, że druga tabela ma znak + w pierwszej komórce drugiego rzędu. Ale gdy tak się stanie, komórki w kolumnie zawierającej + stają się znacznie szersze.

Czy istnieje dobry powód, dla którego HTML to robi? Czy istnieje sposób na określenie, że wszystkie komórki mają taką samą szerokość?

Answer 1

Domyślnie <table> ma table-layout zestaw do auto. To ustawienie powoduje, że przeglądarki obliczają układ komórek tabeli na podstawie zawartości komórek (tzn. Komórka z zawartością ma inny wpływ niż komórka bez niej). Nie jestem do końca pewien, czym jest ten algorytm, ale jeśli nie określisz width=100% na elementach <table>, okaże się, że puste komórki tabeli mają szerokość 1 lub 2 pikseli, która najwyraźniej jest pomnożona przez całą szerokość tabeli. To się zmniejsza wraz z dodawaniem zawartości do pierwszej komórki tabeli, ale zwiększa się wraz z treścią w drugiej.

Pójdę do pościgu i powiem, że table-layout: fixed nie zależy od zawartości komórki i oblicza szerokość komórek tabeli na podstawie określonej szerokości <col> s, granic i odstępów między komórkami. (Specification) Można to zobaczyć w akcji: http://jsfiddle.net/ExplosionPIlls/BeQmw/3/

Spec idzie na mówić o table-layout: auto i rzeczywiście mówi:

aplikacje klienckie nie są wymagane do realizacji tego algorytmu ...

więc nie są gwarantowane określone szerokości komórek tabeli.

Answer 2

http://jsfiddle.net/BeQmw/4/ jeśli masz 2 komórki, użyj width:50%; i że będzie upewnić się, że zachowuje proporcje między 2 komórkami