7 svar · 424 visningar · startad av celia
Nu ska vi se om jag lyckas förklara vad jag menar LOL Säg att jag har en tabell med två rader och två kolumner:
<table>
<tr><td class="ett"></td><td class="tva"></td></tr>
<tr><td class="tre"></td><td class="fyra"></td></tr>
</table>
och en css-fil:
table {
width: 100px;
height: 100px;
margin: 0px;
padding: 0px;
border: 0px;
}
td.ett {
width: 50px;
height: 50px;
margin: 0px;
padding: 0px;
border: 0px;
}
td.tva {
width: 50px;
height: 50px;
margin: 0px;
padding: 0px;
border: 0px;
}
td.tre {
width: 50px;
height: 50px;
margin: 0px;
padding: 0px;
border: 0px;
}
td.fyra {
width: 50px;
height: 50px;
margin: 0px;
padding: 0px;
border: 0px;
}
Nu vill jag ändra i css:en så att jag får en 10px bred border mellan cellerna så det ser ut som ett kors. Ska jag ändra width/height i cellerna då? Vissa browsers lägger ju till bordern utanför cellerna. Hur ser det ut i browsers (vilka?) som räknar in bordern i cellbredden? Jag testade i Mozilla 1.5 och IE 6.0 och det verkade som att bordern räknades in i höjden men las utanför på bredden :q Det kan väl inte vara möjligt?
Sedan vill jag lägga till 10px padding i alla cellerna. Påverkas höjd/bredd då?
Alltså, hur ska css:en se ut med dessa ändringar? Spelar det någon roll vilken doctype man använder?
Nja, onödigt mycket kod i din css!
Var det nåt sånt här du menade tro?
<HTML>
<HEAD>
<TITLE>Cezar Design</TITLE>
<style type=text/css>
table {
width: 300px;
height: 300px;
border: 1px solid black;
}
td {
padding: 10px;
border-collapse:collapse;
border: 1px solid black;
}
</style>
</HEAD>
<BODY>
<table cellspacing=10>
<tr>
<td>
Lite innehåll
</td>
<td>
Lite innehåll
</td>
</tr>
<tr>
<td>
Lite innehåll
</td>
<td>
Lite innehåll
</td>
</tr>
</table>
</BODY>
</HTML>
<style type="text/css">
table {
margin: 0;
padding: 0;
border: hidden; /* IE förstår inte "hidden" */
border-collapse: collapse;
}
td {
margin: 0;
padding: 0;
border: 10px solid black;
}
td div {
width: 50px;
height: 50px;
}
</style>
<!--[if IE]>
<style type="text/css">
/* Eftersom IE inte förstår "hidden" får vi säga att
bordern ska vara samma färg som bakgrundsfärgen,
och flytta tillbaka tabellen till normal position. */
table {
border: 10px solid white;
position: relative;
top: -10px;
left: -10px;
margin-bottom: -10px;
margin-right: -10px;
}
</style>
<![endif]-->
...
<table>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
</tr>
<tr>
<td><div>3</div></td>
<td><div>4</div></td>
</tr>
</table>
Varför bordern stjäl plats av height men inte width vet jag inte, men genom att lägga in ett element (div) som vi sätter höjd och bredd på istället blir vi av med det problemet.
dectgap, din lösning var ju fiffig! Men problemet är egentligen inte hur man gör, för det finns det flera varianter på, utan jag är mer ute efter svaren på frågorna i mitt första inlägg, dvs hur det påverkar höjd/bredd.
bossse, om man lägger till olika border i alla celler så bli det inte onödigt mycket css-kod. Man skulle tex kunna sätta border-right: 10px och border-bottom: 10px i cell ett och border-top: 10px och border-left: 10px i cell fyra. Sedan måste man ju ev ändra på bredden/höjden också.
Jag vill att det ska se ut så här:
En annan variant. Vet inte om jag har missförstått dig, men jaja... :)
<html>
<head>
<title>Test</title>
<style type="text/css">
table {
width: 100px;
height: 100px;
margin: 0px;
padding: 20px;
border: 0px;
}
td.ett {
width: 50px;
height: 50px;
border-right: solid 5px #000000;
border-bottom: solid 5px #000000;
}
td.tva {
width: 50px;
height: 50px;
border-left: solid 5px #000000;
border-bottom: solid 5px #000000;
}
td.tre {
width: 50px;
height: 50px;
border-right: solid 5px #000000;
border-top: solid 5px #000000;
}
td.fyra {
width: 50px;
height: 50px;
border-left: solid 5px #000000;
border-top: solid 5px #000000;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr><td class="ett">1</td><td class="tva">2</td></tr>
<tr><td class="tre">3</td><td class="fyra">4</td></tr>
</table>
</body>
</html>
Bäckman, paddingen skulle vara i cellerna, inte i tabellen ;) Enligt din kod är cellerna fyrkantiga men de blir rektangulära i browsern (Mozilla) och dessutom verkar paddingen i tabellen försvinna i IE (se fil i nästa inlägg). Är det ingen som har en teori om varför det blir såhär?
Om du använder "fixed table layout" ( http://www.w3.org/TR/CSS21/tables.html#width-layout ) kommer borders inte att räknas in i cellens mått.
På den sidan finns mycket information - kanske för mycket.
Försök hitta något som kan vara av intresse.
