---
title: "Problem med visibility:hidden;"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/139596-problem-med-visibility-hidden"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "M.Cheraghi"
published: "2005-12-19T20:38:15.000Z"
updated: "2005-12-23T17:18:07.000Z"
replies: 25
views: 790
page: 1
pages: 2
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/139596-problem-med-visibility-hidden"
---

# Problem med visibility:hidden;

_Sida 1 av 2._

## #1 — M.Cheraghi, 2005-12-19T20:38Z

Hello!

Jag försöker dölja några delar av min tabell. Dock går det bara halvbra, tabellerna syns inte, dock är en yta "reserverad" för den. Hur gör jag för att det inte ska finnas någon yta reserverad för den, när den är osynlig.

Sen undrar jag hur jag kan "anropa" den för att visa den dolda tabellen?
Är det samma princip för att visa/dölja en DIV?
Och hur gör jag för att använda samma link för både visa/dölja.

```
    <tr style="visibility:hidden;">
    <td colspan="2" style="background-color:#CCCCCC;">Hej hej! :)</td>
  </tr>
    <tr style="visibility:hidden;">
    <td colspan="2" style="height:2px;"></td>
  </tr>
```

10-4 over and out!

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

## #2 — oskob, 2005-12-19T20:50Z

Alltså är det javascript du ska göra detta med eller ska det vara serverscript (alltså att sidan får laddas om) ?

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

## #3 — M.Cheraghi, 2005-12-19T20:52Z

> **oskob skrev:**
>
> Alltså är det javascript du ska göra detta med eller ska det vara serverscript (alltså att sidan får laddas om) ?

Det ska vara Klientbaserat! JavaScript eller inte, det kvittar!
Jag trodde det skulle gå att lösa mha CSS.

10-4

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

## #4 — nitro2k01, 2005-12-19T21:20Z

display: none vs block

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

## #5 — M.Cheraghi, 2005-12-19T21:37Z

> **nitro2k01 skrev:**
>
> display: none vs block

Det där fungerar utmärkt!
Då återstår bara hur jag anropar via vanlig länk att få den synlig, och kunna använda samma länk för att få den osynlig igen!

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

## #6 — nitro2k01, 2005-12-19T21:45Z

```
onclick="document.getElementById('bla').style.display=(document.getElementById('bla').style.display=='block')?'hidden':'block';"
```

Denna länk togglar mellan synlig och osynlig. bla är förstås nåt lämpligt id på din tabellcell.

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

## #7 — M.Cheraghi, 2005-12-19T22:01Z

> **nitro2k01 skrev:**
>
> ```
> onclick="document.getElementById('bla').style.display=(document.getElementById('bla').style.display=='block')?'hidden':'block';"
> ```
>
> Denna länk togglar mellan synlig och osynlig. bla är förstås nåt lämpligt id på din tabellcell.

Jag försökte mig på det!

Men den verkar inte vilja visa tabellen! :(

```
    <tr id="bla" style="display:none;">
    <td colspan="2" style="background-color:#CCCCCC;">Hej hej! </td>
  </tr>
    <tr id="bla" style="display:none;">
    <td colspan="2" style="height:2px;"></td>
  </tr>
  
  <tr>
  	<td colspan="2" style="height:2px;"></td>
  </tr>
  <tr>
    <td colspan="2" class="content" style="height:20px; background-color:#CCCCCC"><div align="center">Copyright 2005 - <a href="#" onclick="document.getElementById('bla').style.display=(document.getEl  ementById('bla').style.display=='block')?'hidden':'block';">Cookies</a> </div></td>
  </tr>
```

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

## #8 — icaaq, 2005-12-19T22:01Z

> **nitro2k01 skrev:**
>
> display: none vs block

Jag skulle vilja säga display: none vs table-row(för typ alla webbläsare än IE)/block(för IE)

mv icaaq

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

## #9 — oskob, 2005-12-19T22:59Z

onclick="document.getElementById('bla').style.display=(document.getElementById('bla').style.display=='block')?'hidden':'block';"

ska det väl vara? Det hade krupit in två mellanslag i andra element by id.

R: vad händer om man sätter en table-row till block i andra läsare än ie då?

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

## #10 — zcorpan, 2005-12-19T23:00Z

```
.hidden { display:none; }
```

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

## #11 — icaaq, 2005-12-20T07:44Z

> **oskob skrev:**
>
> ... ... R: vad händer om man sätter en table-row till block i andra läsare än ie då?

Det kan bli problem att använda tex. colspan i de celler där den \<tr\> sätts till display: block;

En tr har som default värde i Geckoläsare(och kanske andra) display:tablerow;
IE har display: block;

mv icaaq

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

## #12 — M.Cheraghi, 2005-12-20T08:12Z

Och hur ska man göra för att få det att fungera i både geckoläsare samt IE?

10-4

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

## #13 — icaaq, 2005-12-20T08:58Z

Jag skulle lösa ditt problem genom att sätta en class på tr och byta den classen till en visande class på onclick. Det får du dock kolla med någon annan om hur man ändrar... sedan har du en regel för show i en css för alla läsare.

```
.show{
display: table-row;
}
```

och en för IE i ett hack eller i ett Conditional Commented block, typ

```
<!--[if IE]>
.show{
display: block;
}
<![endif]-->
```

Typ ;)

mv icaaq

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

## #14 — voigtann1, 2005-12-20T09:02Z

kan även skrivas:

```
* html .show{
display.block;
}
```

 i CSS filen för IE hack.

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

## #15 — icaaq, 2005-12-20T09:06Z

Vilket dock kan bli ett problem i IE 7
<http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx>

mv icaaq

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

## #16 — voigtann1, 2005-12-20T09:15Z

Men IE 7 kommer väl ha liknande firefox tolkning av CSS om inte jag minns helt fel.

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

## #17 — Troxy, 2005-12-20T09:22Z

voigtann1, det där lät lite konstigt.
IE7 kommer ha bättre tolkning av CSS som följer uppsatta standarder, vilket Firefox redan gör.

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

## #18 — icaaq, 2005-12-20T09:47Z

> **icaaq skrev:**
>
> Vilket dock **kan** bli ett problem i IE 7
> <http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx>
> mv icaaq

Som jag sa, det **kan** bli ett problem....

> **http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx skrev:**
>
> Call to action: Please check your pages
> 
> Here is a list of common CSS hacks to look out for (please also consider their variations):
> 
> html \> body - <http://css-discuss.incutio.com/?page=ChildHack>
> \* html - <http://css-discuss.incutio.com/?page=StarHtmlHack>
> head:first-child + body - <http://centricle.com/ref/css/filters/tests/owen/>
> head + body - <http://www.dithered.com/css_filters/css_only/head_adjacent_sibling_body.html>
> body \> element - <http://css-discuss.incutio.com/?page=ChildHack>
> 
> **We ask that you please update your pages to not use these CSS hacks. If you want to target IE or bypass IE, you can use conditional comments** .

mv icaaq

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

## #19 — zcorpan, 2005-12-20T11:34Z

Jag vet inte om mitt förra inlägg gav ljus i tunneln eller inte... 

Vad webbläsaren har för 'display' på tabellceller per default är inte intressant. Vi använder bara ett klassnamn, "hidden". Därefter byter vi mellan det klassnamnet och inget klassnamn. Varför göra det svårare än det är? :)

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

## #20 — icaaq, 2005-12-20T11:53Z

Ok, det var ju en lösning som jag inte tänkt på :) 
Men anledningen av att jag gav mitt förslag var att jag för ett tag sedan sprang på det problemet när jag lekte med :target på en tr, och med :target kan jag ju inte ta bort classnamnet, utan då fick jag helt enkelt byta display-värde.

Men som sagt, använd zcorpan´s lösning :) om ni inte använder :target ;)

mv icaaq

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/139596-problem-med-visibility-hidden  
Nästa sida: https://www.webforum.nu/amne/html-css/139596-problem-med-visibility-hidden/page2.md