border-spacing-fundering

När jag listar kategorier enligt bifogad bild använder jag följande css:

.shopCategoryListTable {
	width:100%;
	border-spacing:10px;
}
.shopCategoryListTable td {
	padding:5px;
	border:1px solid #CCC;
	vertical-align:top;
}

Detta för att få fyrkanterna lika höga oavsett innehåll, vilket jag inte lyckades uppnå med div-taggar. Hursomhelst lägger ju denna metod en extra marginal på tabellen som jag inte vill ha. Så jag undrar om det är möjligt att få bort endast den yttre ramen och endast behålla linjerna emellan cellerna.

Jag förstår inte riktigt vad du menar, men det verkar som du vill ha bort en ram?

Du kan ju andvända dej av denna koden:

style="border-left: 1px solid black; border-right: none;"

Så är det ju bara att lägga till border-top: 1px solid black..

Jag kanske är helt fel ute?! Men du borde kunna lösa ditt problem med detta

Jag var kanske lite otydlig. Ramen är 10 pixlar bred och har samma färg som bakgrunden. Detta för att skapa mellanrum mellan cellerna. Jag har nu färgat ramen för att förtydliga. Det är den röda delen jag vill ha bort. Att sätta "margin:-10px" på tabellen fungerade hyfsat, men det känns inte stabilt, och dessutom blev då tabellen smalare än jag specificerat (100% blev inte 100% procent längre).

Och så ...

... bilden

Eftersom du har satt en bestämd width på tabellen är tomrummet mellan cellerna något webbläsaren har hittat på själv för att det ska se någorlunda okej ut. Sätt istället en bestämd width/height mha. pixlar så löser sig nog problemet.

Melea skrev:

Eftersom du har satt en bestämd width på tabellen är tomrummet mellan cellerna något webbläsaren har hittat på själv för att det ska se någorlunda okej ut.

Nej webbläsaren har inte hittat på någonting. Jag instruerar webbläsaren att jag vill ha 10 pixlars mellanrum mellan cellerna, men jag vill inte ha 10 pixlars mellanrum runt tabellen (se bilden). Finns det kanske ett annat sätt att lösa detta på, utan att använda border-spacing?