[css]Table width 100% met 1 cell scrollbalk - Softwareontwikkeling

vrijdag 11 januari 2008 18:53

Acties:

Verwijderd

Topicstarter

Hallo,

Ik wil graag het volgende. Ik heb een tabel (width 100%) met 1 rij en 2 kolommen. In de linker cel komt een redelijk korte tekst te staan en in de rechter kolom een lange tekst (langer dan de restruimte breed is). Nu wil ik een scrollbalk in de rechter cel zodat de hele tabel niet groter wordt dan 100%. Ik heb het volgende :

HTML:

<html>
<head>
</head>
<body>

<table width="100%" border="1">
    <tr>
    <td><span style="white-space: nowrap;">Redelijk korte teksten</span></td>
    <td><div class="linebreak" style="overflow:scroll; white-space: nowrap;">LAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANGE TEKST</p></td>
    </tr>
</table>

</body>
</html>

maar dan wordt de tabel toch groter.

vrijdag 11 januari 2008 21:13

Acties:

Herko_ter_Horst

Zorg eerst even dat je valide HTML maakt (met DOCTYPE). En donder vervolgens die tabel eruit

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<title>Test doc</title>
</head>
<body>

<div style="float: left; margin-right: 5px;"><span style="white-space: nowrap;">Redelijk korte teksten</span></div>
<div style="overflow-x: scroll;"><span style="white-space: nowrap;">LAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANGE TEKST</span></div>

</body>
</html>

[ Voor 7% gewijzigd door Herko_ter_Horst op 11-01-2008 21:27 ]

"Any sufficiently advanced technology is indistinguishable from magic."

vrijdag 11 januari 2008 22:40

Acties:

Verwijderd

Topicstarter

Dit werkt perfect en is precies wat ik zoek... met dank is groot want ik heb echt lang gezocht $_/-\o_$ $_/-\o_$ $_/-\o_$

vrijdag 8 februari 2008 19:02

Acties:

Verwijderd

Topicstarter

Ik moet een klein beetje terugkrabbelen. Het blijkt inderdaad perfect te werken onder IE7 maar niet onder IE6. Ik probeer met deze code iets te maken wat voornamelijk door IE6 bekeken zal worden. Enig idee hoe ik de code kan aanpassen, ik heb al een hoop geprobeerd maar kom er niet uit. Is er niet een "quirks" variant die het op allebei zal doen ??

vrijdag 8 februari 2008 20:40

Acties:

Zillion01

Obey your screen!

Verwijderd schreef op vrijdag 08 februari 2008 @ 19:02:
Ik moet een klein beetje terugkrabbelen. Het blijkt inderdaad perfect te werken onder IE7 maar niet onder IE6. Ik probeer met deze code iets te maken wat voornamelijk door IE6 bekeken zal worden. Enig idee hoe ik de code kan aanpassen, ik heb al een hoop geprobeerd maar kom er niet uit. Is er niet een "quirks" variant die het op allebei zal doen ??

Voor iE6 moet je een width en hoogte aangeven. Bijv. <div style="overflow: auto; width:100%; height:100%; white-space: nowrap;">

vrijdag 28 maart 2008 18:00

Acties:

Verwijderd

Topicstarter

Ik krijg het toch nog niet helemaal werkend in IE 6. Als ik width 100% aangeef, dan komt de rechter div sowieso onder de linker div en dat is juist niet de bedoeling. Iemand nog suggesties??

vrijdag 28 maart 2008 20:47

Acties:

_Thanatos_

Ja, en kaal

Het hoeft geen 100% te zijn. Het mag ook een andere breedte zijn, bijv 20em.

日本！🎌