webForumDet fria alternativet

Border i tabell

HTML & CSS

6 svar · 299 visningar · startad av monAmour

Medlem sedan dec. 2002258 inlägg
Frågan#1

Varför får jag ingen border i min table?
Ska ha lite gråaktig bakgrund och varje cell ska separeras av en 1px solid border som ska vara vit.

	<!-- Shopping cart -->
	<table cellspacing="0" style="background:#EEEEEE; width:778px; padding:1px; border-width:1px; border-style:solid; border-color:#FFFFFF">
		<tr>
			<td width="80" valign="middle">
				<div align="center">
					<span class="text_10px">
						Antal varor
					</span>
				</div>
			</td>
			<td width="*" valign="middle">
				<span class="text_10px">
					Senast ilagda vara
				</span>
			</td>
			<td width="100" valign="middle">
				<div align="center">
					<span class="text_10px">
						Totalt exkl. moms
					</span>
				</div>
			</td>
			<td width="100" valign="middle">
				<div align="center">
					<span class="text_10px">
						Totalt inkl. moms
					</span>
				</div>
			</td>
			<td width="120">
				<div align="right">
				</div>
			</td>
		</tr>
		<tr>
			<td width="80" valign="middle">
				<div align="center">
					<span class="text_10px">
						2 st
					</span>
				</div>
			</td>
			<td width="*" valign="middle">
				<span class="text_10px">
					[45433] Royal Canin Hundmat, 15 kg
				</span>
			</td>
			<td width="100" valign="middle">
				<div align="center">
					<span class="text_10px">
						455:-
					</span>
				</div>
			</td>
			<td width="100" valign="middle">
				<div align="center">
					<span class="text_10px">
						578:-
					</span>
				</div>
			</td>
			<td width="120">
				<div align="right">
				</div>
			</td>
		</tr>
	</table>
Medlem sedan apr. 2000313 inlägg
#2

Ett knep vore nog att sätta bordergrejerna på tabellcellerna i stället, annars blir det bara en vit border runt hela tabellen

<style type="text/css">
	td { border:1px solid #fff }
	table {border-collapse:collapse}
</style>
Medlem sedan juli 20013 378 inlägg
#3

Hmm...
Två saker:
1)
Du har med "border" redan idag på table-elementet, men den syns dåligt pga att den är vit... Gör den röd så ser du att den är där redan ;)

Om du anger border med CSS på en tabell, så måste du även ange en border på varje td-element... t.ex. med

<style type="text/css">
<!--
td {
  border-width:1px; 
  border-style:solid; 
  border-color:#FFFFFF
 }
-->
</style>

om man nu skall ta samma inställning som du kör med på <table>.

  1. (lite off-topic ;) )
    Om du är *extremt* noga med att bara köra med CSS så kan du prova att lägga till en "border-collapse:collapse" i style="" på <table> om du vill slippa cellspacing="0" - det är det enda sättet att få bort cellspacing som fungerar i "ren" CSS idag. (det finns en stil "border-spacing" också, men den funkar inte i speciellt många webbläsare iallmänhet och absolut inte i MSIE6 i synnerhet ;) )

/red: Hej martin! du var snabbare än jag :birp

Medlem sedan juni 2003771 inlägg
#4

Om du lägger in detta css så behövs det inga
<span class="text_10px"> som du lagt in i varje td.
Textstorleken anges direkt för td i css.

<style type="text/css">
<!--
body 
{background-color:green;font-family:Arial, Helvetica, sans-serif; font-size: 16px; margin:5px;}
table {width:99%; height:99%; background-color:gray; border:1px solid black; border-collapse:collapse; }
td {border:1px solid white;font-family:Arial, Helvetica, sans-serif; font-size:10px;}
-->
</style>
Medlem sedan maj 200330 inlägg
#5

Det verkar variera med vilken webbläsare man har. Iallafall på Mac:en.
Om man gör som ni säger, så blir borden totalt 2px (1px från <td> och 1px från <table>) i Safari och IE5, men totalt 1px i Camino, Mozilla och Opera.

När kommer utvecklarna att börja följa standarden?

Medlem sedan juli 20013 378 inlägg
#6

Nyfiken:
Vilken <!DOCTYPE kör du med när du testar i Safari och IE5/Mac ?

En som ställer webbläsarna i "quirks"-mode eller en som ställer dem i "standards" - eller blir det samma fenomen oavsett <!DOCTYPE ?

Om olika moder i olika webbläsare: http://www.hut.fi/u/hsivonen/doctype.html

Medlem sedan maj 200330 inlägg
#7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

mode?!? :-o – det trodde jag hade med kläder att göra ;-)
(tack för länken!)

261 ms totalt · 4 externa anrop · v20260731065814-full.1dc6f849
121 ms — deklarationer (db)
0 ms — hämta statistik (cache)
127 ms — hämta tråd, inlägg och bilagor (db)
131 ms — ändringar (db)