Autor | Zpráva | ||
---|---|---|---|
MilanJ Profil |
#1 · Zasláno: 16. 12. 2006, 12:51:47 · Upravil/a: MilanJ
Svou stránku mám v Doctype: XHTML 1.0 Transitional. Stránka obsahuje mimo jiné tabulku s výpisem různých hodnot.
Mám tedy TABLE, která obsahuje 5 sloupců. Šířku sloupců definuji pomocí CSS. CSS předpis: table { margin: 0px; padding: 0px; width: 629px; } th { padding-top: 3px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; font-weight: bold; text-align: left; } td { padding-top: 3px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; margin: 0px; } Chci, aby šířka sloupů byla za všech okolností fixní a text se, v případě potřeby, zalomil na další řádek tabulky. Definoval jsem tedy několik class ...pro každý sloupec tabulky zvlášť tak, aby každý sloupec měl svůj styl class jsem přiřadil nadpisům jednotlivých sloupců: <th class="datum">Sloupec 1</th>. Probém je v tom, že tabulka vypadá jinak pod IE a jinak pod FF. Prostě sloupce nejsou stejně široké pod IE a FF. Dělám něco špatně? |
||
MilanJ Profil |
#2 · Zasláno: 16. 12. 2006, 17:57:12
Možná se šířka sloupců definuje v procentech, opravdu s tím nemám zkušenosti.
|
||
DJ Miky Profil |
#3 · Zasláno: 16. 12. 2006, 18:27:24 · Upravil/a: DJ Miky
Když zadáš pevnou šířku a máš definované paddingy/bordery, tak narazíš na box-model bug. (Každý prohlížeč počítá šířku jinak)
|
||
MilanJ Profil |
#4 · Zasláno: 16. 12. 2006, 21:54:37
DJ Miky
To ano, ale bavíme se tu o tabulce, znamená to, že musím ošetřit šířku prvku TD a TH? |
||
Bubák Profil |
#5 · Zasláno: 16. 12. 2006, 22:14:13
Pokud je rozdílný vzhled způsobený rozdílným box-modelem, tak ho sjednoť, použij CSS "kouzelnou formuli":
* {-moz-box-sizing: border-box; box-sizing: border-box;} Pokud bys chtěl omezit jen na tabulky, tak: table * {-moz-box-sizing: border-box; box-sizing: border-box;} |
||
MilanJ Profil |
#6 · Zasláno: 16. 12. 2006, 22:34:37
Bubák
CSS "kouzelná formule"? Neznám a vyzkouším.:-) |
||
MilanJ Profil |
#7 · Zasláno: 16. 12. 2006, 22:38:03
Bubák
No...nic to neudělalo. :-/ Možná bude snažší, když tu dám ukázkový kód, vyzkoušíte, uvidíte, a třeba někdo poradí.:-/ Všimněte si rozdílností pod IE a FF... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style type="text/css"> <!-- table { margin: 0px; padding: 0px; width: 629px; } th.datum { width: 70px; } th.nazev { font-weight: bold; color: #FFFFFF; width: auto; } th.divize { /*width: 100px; */ } th.podrobnosti { font-weight: bold; color: #FFFFFF; } th { background-color: #ff9900; padding-top: 3px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; font-weight: bold; text-align: left; color: #FFFFFF; margin: 0px; } td { background-color: #ffd08a; padding-top: 3px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; vertical-align: top; margin: 0px; } th.podrobnosti { font-weight: bold; color: #FFFFFF; width: auto; } th.datum { width: 70px; } --> </style> </head> <body> <table> <tr> <th class="datum">Začátek</th> <th class="datum">Konec</th> <th class="datum">Název</th> <th class="datum">Divize</th> <th class="podrobnosti"></th> </tr> <tr> <td>11.12. 2006 12:00</td> <td>31.12. 2006 12:00</td> <td>Krytý bazén: Ubytovna světelné a zásuvkové rozvody.</td> <td>Ústí nad Labem</td> <td>podrobnosti</td> </tr> </table> </body> </html> |
||
Bubák Profil |
#8 · Zasláno: 16. 12. 2006, 22:45:28
MilanJ
Já si jí všiml, když ji doporučoval Chamurappi, ale na stránce ji má Yuhů. www.jakpsatweb.cz/css/moz-box-sizing.html |
||
MilanJ Profil |
#9 · Zasláno: 16. 12. 2006, 22:47:26
Bubák
Nicméně to s mojí tabulkou nic nedělá.:-/ |
||
MilanJ Profil |
#10 · Zasláno: 16. 12. 2006, 23:27:47
Myslím, že už to mám... Celý problém je v tom, že v CSS definuji jen
th.datum { width: 70px; } ...stačí když definuji také td.datum { width: 70px; } ...a je to. |
||
Časová prodleva: 18 let
|
Toto téma je uzamčeno. Odpověď nelze zaslat.
0