---
title: "Tabell med runda kanter"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/78745-tabell-med-runda-kanter"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "ampy"
published: "2003-06-02T21:52:47.000Z"
updated: "2003-06-03T10:02:40.000Z"
replies: 11
views: 552
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/78745-tabell-med-runda-kanter"
---

# Tabell med runda kanter

## #1 — ampy, 2003-06-02T21:52Z

Jag har denna tabell för att skapa en tabell med runda kanter:

```
<table border="0" height='*' width="250" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0">

	<tr height='6'>

		<td width='6' valign='top'><img src='bilder/table_upleft.gif' border='0' width='6' height='6'></td>

		<td width='238' bgcolor='#DEDEFF' style="border-top: 1 solid #2F19FF"><b style='font-size: 1 px;'>&nbsp;</b></td>

		<td width='6' valign='top'><img src='bilder/table_upright.gif' border='0' width='6' height='6'></td>

	</tr>

	<tr height='*'>

		<td bgcolor='#DEDEFF' width='6' style="border-left: 1 solid #2F19FF"><b style='font-size: 1 px;'>&nbsp;</b></td>

		<td width='238' valign='top' bgcolor='#DEDEFF'>
						
			<table bgcolor='#DEDEFF' border='0' cellspacing='0' cellpadding='0'><tr><td><img src='bilder/omrostning.gif'></td><td width='5'></td><td><b>Omröstning</b></td></tr></table><br><br><br><br>

		</td>

		<td bgcolor='#DEDEFF' width='6' style="border-right: 1 solid #2F19FF"><b style='font-size: 1 px;'>&nbsp;</b></td>

	</tr>

	<tr height='6'>

		<td width='6' valign='bottom'><img src='bilder/table_downleft.gif' border='0' width='6' height='6'></td>

		<td width='238' bgcolor='#DEDEFF' style="border-bottom: 1 solid #2F19FF"><b style='font-size: 1 px;'>&nbsp;</b></td>

		<td width='6' valign='bottom'><img src='bilder/table_downright.gif' border='0' width='6' height='6'></td>

	</tr>

</table>
```

Men jag får små vita kanter av någon underlig anledning. Varför?

Exempel kan ses på denna sida:
<http://www.ampy.net/tabell_rund.html>

Permalänk: https://www.webforum.nu/p/78745

## #2 — voigtann1, 2003-06-02T21:54Z

ta bort: \<b style='font-size: 1 px;'\>&nbsp;\</b\>
och kolla

Permalänk: https://www.webforum.nu/p/1072716

## #3 — sorhh, 2003-06-02T21:54Z

Här har du en färdig mall som du kan gå efter

<http://www.html-gruppen.nu/resurser/html/tabell/index.shtml>

Permalänk: https://www.webforum.nu/p/1072718

## #4 — ampy, 2003-06-02T21:58Z

> **voigtann1 skrev:**
>
> ta bort: \<b style='font-size: 1 px;'\>&nbsp;\</b\>
> och kolla

Spelar ingen roll om jag har det med eller inte. Resultatet blir detsamma. 

> **sorhh skrev:**
>
> Här har du en färdig mall som du kan gå efter
> 
> <http://www.html-gruppen.nu/resurser/html/tabell/index.shtml>

Kollade på den där mallen och har redan gjort som dom gör.

Permalänk: https://www.webforum.nu/p/1072720

## #5 — ejick, 2003-06-02T22:27Z

Du kanske skall prova med att lägga till:

```
<img src ... align="top">
```

Permalänk: https://www.webforum.nu/p/1072742

## #6 — ampy, 2003-06-03T08:10Z

> **ejick skrev:**
>
> Du kanske skall prova med att lägga till:
>
>
> ```
> <img src ... align="top">
> ```

Det hjälper inte.  :(

Permalänk: https://www.webforum.nu/p/1072806

## #7 — Webban, 2003-06-03T08:45Z

Tror att det beror på vilken webbläsare du har. På min Mac ser det ok ut i IE men inte i Safari, Netscape eller Camino.

Permalänk: https://www.webforum.nu/p/1072823

## #8 — ampy, 2003-06-03T08:47Z

Jag använder Internet Explorer 6.0 och där ser det inte ok ut. Har även testat med IE 5.0 med samma resultat.

Permalänk: https://www.webforum.nu/p/1072825

## #9 — jarvklo, 2003-06-03T08:52Z

Ampy - du har två olika problem.

Dels påverkas din tabell av textinställningarna eftersom du kör med &amp;nbsp; i dina "ramceller" mellan "runda hörnen" och ställer in textstorleken på ett sätt som inte verkar funka av någon anledning. (kolla i Mozilla så ser du vad jag menar ;) )

Var noga med att ställa in font-size:1px på \*alla\* "tomma" celler (du kan göra det direkt på \<td\> så slipper du \<b\>-taggen ;) ) - och lägg även in en &amp;nbsp; i alla dessa  (var också noga med att ange "1px" för dina border-storlekar - bara "1" funkar bara i MSIE under vissa omständigheter!

(RED: Du hade också råkat skriva font-size: 1 px - vilket inte funkar... Det måste stå font-size: 1px - utan mellanslaget mellan siffran och enheten px ! - vilket "slog ut" textstorleken i Mozilla m.fl...)

**Men** du har också (håll i dig) skapat dina hörn så att den yttre kanten är genomskinlig runt hela bilden (dvs "hörnet" går inte ända ut utan du har t.ex. en pixelram med "bakgrundsfärg" nederst och till höger i "topleft"-bilden!) - vilket ger... Små vita kanter eftersom bakgrundsfärgen i tabellen (och tabellcellen) är vit... ;)

Permalänk: https://www.webforum.nu/p/1072831

## #10 — ampy, 2003-06-03T09:34Z

Tack för alla tips jarvklo!  :bire 

Nu ser det helt ok ut i Mozilla men inte i IE.

Bedöm själva:
<http://www.ampy.net/tabell_rund.html>

Hur fixar man så att det ser ok ut i IE?

Permalänk: https://www.webforum.nu/p/1072864

## #11 — jarvklo, 2003-06-03T09:54Z

Hmm...

Kom också på det efter en stund...

Först trodde jag att det också hade med &amp;nbsp;-användningen att göra, så jag bytte ut "tomheten" mot "genomskinliga enpixelbilder" (ett standardtrix sedan NN4:as dagar ;) - men det hjälpte inte...

Sedan kom jag på vad det beror på!
Du har ju border till att lägga på "enpixelramen" i "mellancellerna", och det är den som ställer till det.

Den aningen ovanliga visningen i MSIE beror på hur den lägger till border på tabellceller (inom eller utom innehållets "ram" så att säga) - den har alltid varit lite "egen" i hur detta görs...

Provade att ta bort "border: 1px ... ... " från "yttre mellancellerna" och problemet försvann...

Det enda jag kom på att göra för att komma förbi detta var att byta ut användningen av border-attributen mot en repeterande bakgrundsbild istället... Och det verkar funka även i MSIE efter det...

Jag zip:ade resultatet (bifogas) - eftersom jag lade till fem nya filer, men koden kommer här:

```
<table border="0" width="250" bgcolor="#ffffff" cellspacing="0" cellpadding="0">
  <tr height='6'>
    <td width='6'><img src='bilder/table_upleft.gif' width='6' height='6'></td>
    <td width='238' background="bilder/table_up.gif"><img src='bilder/table_empty.gif' width='1' height='1'></td>
    <td width='6'><img src='bilder/table_upright.gif' width='6' height='6'></td>
  </tr>

  <tr>
    <td width='6' background="bilder/table_left.gif"><img src='bilder/table_empty.gif' width='1' height='1'></td>

    <td width='238' valign='top' bgcolor='#DEDEFF'>
      <table bgcolor='#DEDEFF' border="0" cellspacing='0' cellpadding='0'>
        <tr><td><img src='bilder/omrostning.gif'></td>
        <td width='5'></td><td><b>Omröstning</b></td></tr>
      </table>
      <br><br><br><br>
    </td>

    <td width='6' background="bilder/table_right.gif"><img src='bilder/table_empty.gif' width='1' height='1'></td>

  </tr>

  <tr height='6'>
    <td width='6'><img src='bilder/table_downleft.gif' width='6' height='6'></td>
    <td width='238' background="bilder/table_down.gif"><img src='bilder/table_empty.gif' width='1' height='1'></td>
    <td width='6'><img src='bilder/table_downright.gif' width='6' height='6'></td>
  </tr>

</table>
```

Bilagor:

- [wfexempel.zip](https://www.webforum.nu/a/1549.zip)

Permalänk: https://www.webforum.nu/p/1072874

## #12 — ampy, 2003-06-03T10:02Z

Tack för all hjälp!  :bire

Permalänk: https://www.webforum.nu/p/1072880

---

Tråden på webben: https://www.webforum.nu/amne/html-css/78745-tabell-med-runda-kanter