---
title: "CSS popup i tabellcell"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/109245-css-popup-i-tabellcell"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Gein"
published: "2004-08-14T18:32:33.000Z"
updated: "2004-08-15T11:15:49.000Z"
replies: 7
views: 307
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/109245-css-popup-i-tabellcell"
---

# CSS popup i tabellcell

## #1 — Gein, 2004-08-14T18:32Z

Konstig rubrik?
Jag har använt [denna kod](http://www.meyerweb.com/eric/css/edge/popups/demo.html) för att poppa upp boxar när man för muspekarn över vissa textlänkar. Nu vill jag istället ändra länkarna från textlänkar till tabellcellslänkar. Men jag vet bannemej inte hur det ska gå till. 
Nu ser en länk ut såhär:

```
<td><div id="verText"><a href=""><b>1</b><span>Betalning faktura 101</span></a></div></td>
```

Och när jag istället ville länka hela cellen så provade jag med 

```
<div id="verText"><a href=""><td><b>1</b></td><span>Betalning faktura 101</span></a></div>
```

Detta fungerar dock inte.

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

## #2 — oHLLe, 2004-08-14T23:52Z

Med den här css:n

```
td span {display:none}

td:hover span {display:block}
```

och den här html:n

```
<td><b>1</b><span>Betalning faktura 101</span></td>
```

Så triggas effekten på hela tabel-cellen, tyvärr fungerar inte hover-effekten i IE på någonting annat än länkar. Men med <http://www.xs4all.nl/~peterned/csshover.html> kan du få IE att hovra på alla element, dock så kommer det bara fungera bara på texten i cellen. Alltså samma resultat som du hade från början. Men för alla som inte använder IE så kommer det fungera som du vill om jag inte missförstod något ;)

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

## #3 — Gein, 2004-08-15T08:16Z

Men! Varför kan inte IE bete sej som normala webbläsare gör? Orka hålla på med specialfall för IE :(

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

## #4 — Insider, 2004-08-15T09:56Z

Den här varianten ska fungera bra.

```
div#wrap {
	border:0;
	margin-top:50px;
}
table {
	border: 0;

}

table a span {
	display:none
}

table a:hover span {
	display: block;
	position:absolute;
	top:1px;
	left:1px;
}

td {
	border: #000 1px solid;
	margin:12px;
	padding:7px 0px 6px 0px;
}
a {
	text-decoration:none;
	background:#ccc;
	margin:0;
	padding:7px 7px 7px 7px;
}
a:hover {
	background:#e45;
}
```

```
<div id="wrap">
	<table>
		<tr>
			<td><a href="#">[url]www.fredrik77.se[/url]<span>Min hemsida</span></a></td>
			<td><a href="#">[url]www.fredrik77.se[/url]</a></td>
			<td><a href="#">[url]www.fredrik77.se[/url]</a></td>
			<td><a href="#">[url]www.fredrik77.se[/url]</a></td>
		</tr>
</table>
</div>
```

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

## #5 — Gein, 2004-08-15T10:34Z

Men den där poppar väl bara upp boxen när man för muspekaren över länken? Det har jag redan åstadkommit.

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

## #6 — Insider, 2004-08-15T10:48Z

Jovisst, men länken fyller ut hela tabellcellen. Så man måste inte hovra över själva texten.

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

## #7 — Gein, 2004-08-15T11:13Z

Ah, det är alltså

```
padding: 7px 7px 7px 7px;
```

som är nyckeln.
Tack!

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

## #8 — Insider, 2004-08-15T11:15Z

Precis, sen får man trixa lite med paddingen i td för att det ska se snyggt ut.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/109245-css-popup-i-tabellcell