Autor Zpráva
MilanJ
Profil
#1 · Zasláno: 16. 12. 2006, 12:51:47 · Upravil/a: MilanJ
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
Bubák
CSS "kouzelná formule"? Neznám a vyzkouším.:-)
MilanJ
Profil
#7 · Zasláno: 16. 12. 2006, 22:38:03
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
Bubák
Nicméně to s mojí tabulkou nic nedělá.:-/
MilanJ
Profil
#10 · Zasláno: 16. 12. 2006, 23:27:47
Odpovědět Citovat
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: 17 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0