webForumDet fria alternativet

scrolla tabell

4 svar · 510 visningar · startad av henrikjohansson

henrikjohanssonMedlem sedan maj 2000373 inlägg
#1

Jag kan/får inte ändra i htmlkoden så en lösning i ren css hade varit perfekt

jag har en tabell

<table class="tb">
<tr>
<td>Rubrik 1</td>
<td>Rubrik 2</td>
</tr>

<tr>
<td class="item">1</td>
<td class="item">2</td>
</tr>

<tr>
<td class="altitem">1</td>
<td class="altitem">2</td>
</tr>

<tr>
<td class="item">1</td>
<td class="item">2</td>
</tr>

<tr>
<td class="altitem">1</td>
<td class="altitem">2</td>
</tr>

<tr>
<td class="item">1</td>
<td class="item">2</td>
</tr>

<tr>
<td class="altitem">1</td>
<td class="altitem">2</td>
</tr>

<tr>
<td class="item">1</td>
<td class="item">2</td>
</tr>

<tr>
<td class="altitem">1</td>
<td class="altitem">2</td>
</tr>

osv.......

</table>

Nu vill jag ha vertikal scrollbar på endast värdena och inte rubrikerna. Går detta att göra utan att ändra något i htmlkoden?

TinwëlintMedlem sedan maj 2004478 inlägg
#2

Ja. Även om det skulle vara bättre att ändra html-koden så borde väl det här fungerara (inte alls testat):

.tb .item, .tb .altitem {
overflow: scroll;
}

overflow: scroll; kommer förmodligen att visa både vertikala och horisontella rullningslister.
overflow: auto kan du ju också prova. Men då kommer nog (har inte riktigt koll på hur overflow uppför sig i tabellceller) listerna bara att visas när de behövs.

Alternativet kan ju vara att använda det IE-specifika overflow-x: scroll med ett inte så förutsägbart resultat i andra webbläsare. Om de andra webbläsarna däremot skulle uppföra sig bra med exempelvis overflow: auto kan du göra en regel för IE och en för andra:

.tb tr > .item, .tb tr > .altitem {
overflow: scroll;
}

/*IE förstår inte barnselektorn '>' och kommer inte att använda den där regeln*/

* html .tb .item, * html .tb .altitem {
overflow: scroll;
}

/* IE tror att html ligger i någon slags behållare som man kan välja med hjälp av den universella selektorn '*'. De andra webbläsrana struntar i den här regeln */
PepeJeriaMedlem sedan feb. 2003779 inlägg
#3

Vad jag vet så går det inte att få en scrollbar i en tabell i IE, endast Mozilla. Och då menar jag en tabell, inte att lägga till en div med overflow:auto | scroll;

I Mozilla kan du få delar av tabellen att scrolla genom att lägga till en tbody, wrappa de tr:s som du vill ska scrolla med tbody taggen, sen lägger du till följande css för att aktivera scrollbars:

tbody
{
	height:100px;
	overflow:auto;
}

Som det nämndes ovan så får du vertikalla och horinzontella scrollbars... overflow-x och overflow-y är tyvärr inte implementerat ännu, men kommer att komma i nästa version.

TinwëlintMedlem sedan maj 2004478 inlägg
#4

overflow-x och overflow-y är tyvärr inte implementerat ännu, men kommer att komma i nästa version.

...förmodligen, om det inte blir nya egenskaper på overflow:
http://www.w3.org/TR/2002/WD-css3-box-20021024/#overflow

Vad tråkigt att inte overflow funkade hur som helst. Jag kanske borde testa mer. Jäkla IE.

henrikjohanssonMedlem sedan maj 2000373 inlägg
#5

Har löst det så att jag la tabellen i en div..
Det är till ett intranät där alla sitter med IE.

Inte riktigt den lösningen jag ville ha.. men orkar inte lägga mer tid på det..

Genererad på 386 ms · cache AV · v20260730165559-full.f96bc7eb