dynamische Tabelle

[trunx]

Hallo an alle,

ich habe folgendes Problem: in einem relativ kleinen Bereich wird dynamisch der Inhalt einer Tabelle eingelesen, die Überschriften jeder Spalte sollen fix sein (Tabellenkopf), die Anzahl der Zeilen ist variabel, so dass wegen des kleinen Bereichs der Tabellenbody mitunter gescrollt werden muss. Dadurch aber ist mal ein Scrollbalken da und manchmal nicht und entsprechend variiert die Breite der Tabelle. Das führt wiederum dazu, dass die Zelleninhalte nicht mehr genau unter den jeweiligen Überschriften steht. Wie bekommt man es nun hin, dass die Tabelle ihr Aussehen trotz Scrollbalken an/aus nicht ändert? Ich habe dies mit div-, span- und css probiert (also keine klassische Tabelle), weil ich überdies möchte, dass eine ganze Zeile als link gesetzt werden kann, bei table habe ich das nicht hinbekommen.

vielen Dank

[trunx]

Woran ich z.B. denke ist, kann man den Scrollbalken immer "an" haben, auch wenn er manchmal inaktiv ist?

bye trunx

[Yinan]

Hoi!

Kommt vieleicht etwas spät, aber ich wüsste ne möglichkeit, das ganze ohne Jacascript zu machen (weiß aber jetzt leider nciht wie das dann im Design sich ausschlägt, müssteste testen):
<table>
 <tr>
  <td><a href="..">
   <table>
    <tr>
     <td>Zelle 1</td>
     <td>Zelle 2</td>
     <td>Zelle 3</td>
    </tr>
   </table>
   </a>
  </td>
 </tr>
</table>

Jetzt müsste "Zelle 1, Zelle2, Zelle 3" alles zusammen als ein einziger Link gelten (theoretisch, das ganze ist nicht getestet und ich weiß null wie das Design danach aussieht).

mfg

Yinan

mfg

Yinan

[D.R.]

Hallo,

Ich habe dies mit div-, span- und css probiert (also keine klassische Tabelle),

Wenn deine Tabelle Tabellarische Daten hat, solltest du eine richtige Tabelle erstellen.

weil ich überdies möchte, dass eine ganze Zeile als link gesetzt werden kann, bei table habe ich das nicht hinbekommen.

Entweder machst du ein <a> per CSS zu einem Block-Element oder änderst per onclick die location (JavaScript).

anderes Posting:

Woran ich z.B. denke ist, kann man den Scrollbalken immer "an" haben, auch wenn er manchmal inaktiv ist?

Welchen Scrollbalken?
Den horizontalen, den vertikalen oder beide?

Für alle genannten Möglichkeiten gibt es overflow[-x,-y].

mfg. Daniel

[trunx]

Vielen Dank für deine Antwort -
overflow:auto;
overflow-x:hidden;
overflow-y:scroll;
bringt jetzt erstmal für ein paar Browser ausreichende Ergebnisse; wie mache ich aber <a> zu einem Block-Element? Ich hab bisher

<tr>
 <td><a href="url">Sp 1</a></td>
 <td><a href="url">Sp 2</a></td>
 ...
 <td><a href="url">Sp n</a></td>
</tr>

und hätte gern etwas in der Art

<tr>
<a href="url">
 <td>Sp 1</td>
 <td>Sp 2</a></td>
 ...
 <td><a href="url">Sp n</td>
</a>
</tr>

bye trunx

[D.R.]

Hallo,

wie mache ich aber <a> zu einem Block-Element? Ich hab bisher

<tr>
<td><a href="url">Sp 1</a></td>
<td><a href="url">Sp 2</a></td>
...
<td><a href="url">Sp n</a></td>
</tr>

Das sollte so bleiben, denn auch nachdem du den Link per CSS zu einem Block-Element gemacht hast (per http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display:block), bleibt „a“ aus HTML-Sicht ein inline-Element.

Aus Stylesheet-Sicht, ist „a“ dagegen ein Block-Element, das die gesamte zur Verfügung stehende Breite einnimmt (in deinem Fall würde es über die gesamte <td> gehen) und auch mit height/width formatiert werden kann.

und hätte gern etwas in der Art

<tr>
<a href="url">
<td>Sp 1</td>
<td>Sp 2</a></td>
...
<td><a href="url">Sp n</td>
</a>
</tr>

Das geht nicht. Du kannst mit CSS nur die Darstellung, nicht aber die HTML-Regeln ändern. Du musst jeder Tabellenzelle einen eigenen Link geben (a-Element).

Wenn du die ganze <tr> verlinken willst, geht das nur mit JavaScript.

mfg. Daniel

[Cybaer]

Hi,

Wenn du die ganze <tr> verlinken willst, geht das nur mit JavaScript.

Oder in jeder Zelle der TR einen Link mit 100% Größe.

Gruß, Cybaer

[trunx]

hmm, auf javascript wollte ich eigentlich verzichten ..
@cybaer: was konkret meinst du mit "in jeder Zelle der TR einen Link mit 100% Größe"? Etwas in der Art:
<tr>
 <td><a href=".." width="100%">Sp 1</a></td>
 <td><a href=".." width="100%">Sp 2</a></td>
...
 <td><a href=".." width="100%">Sp n</a></td>
</tr>
bzw.
<tr>
 <td><a href=".." style="width: 100%;">Sp 1</a></td>
 <td><a href=".." style="width: 100%;">Sp 2</a></td>
...
 <td><a href=".." style="width: 100%;">Sp n</a></td>
</tr>
 mal probieren.

vielen Dank

[trunx]

hab das jetzt ausprobiert (auch verschiedene Varianten), aber es funktioniert nicht :-(, die einzige bisher optisch überzeugende, allerdings sehr quellcodeintensive Art ist, für jede Zeile eine Tabelle anlegen und dann jede dieser Tabellen verlinken.

hmm, auf javascript wollte ich eigentlich verzichten ..
@cybaer: was konkret meinst du mit "in jeder Zelle der TR einen Link mit 100% Größe"? Etwas in der Art:
<tr>
<td><a href=".." width="100%">Sp 1</a></td>
<td><a href=".." width="100%">Sp 2</a></td>
...
<td><a href=".." width="100%">Sp n</a></td>
</tr>
...

[Cybaer]

Hi,

@cybaer: was konkret meinst du mit "in jeder Zelle der TR einen Link mit 100% Größe"? Etwas in der Art:

Hmm, wie wäre es, etwas HTML zu lernen (oder zumindest einfaches Nachschlagen)? SELFHTML bietet eine wunderbare Referenz, welches Element & Attribut in einem Element erlaubt sind. =:-o

<td><a href=".." width="100%">Sp 1</a></td>

<td><a style="display:block; width:100%; height:100%">...</a></td>

Gruß, Cybaer

PS: Daß man Inline-Styles tunlichst in ein STYLE-Element oder externe CSS-Datei auslagert, versteht sich von selbst, aber ich erwähne es sicherheitshalber noch mal ... ;)

[trunx]

Hi,
@cybaer:

Hmm, wie wäre es, etwas HTML zu lernen (oder zumindest einfaches Nachschlagen)?

dazu muss ich wohl nichts sagen, wenn wenigstens deine Tipps funktionieren würden ;-)

<td><a style="display:block; width:100%; height:100%">...</a></td>

auch diese Variante habe ich natürlich durchprobiert, ehe ich hier poste, okay! Liefert aber nicht die gesuchte Funktionalität, nämlich (vllt zur Erinnerung), dass die ganze Zeile einer Tabelle verlinkt ist.

<STYLE TYPE="TEXT/CSS">
a { display:block; width:100%; height:100%; color: #0000FF }
a:hover { display:block; width:100%; height:100%; color: #FF0000; }
</STYLE>
...
<tr>
 <td><a href="">Sp 1</a></td>
 <td><a href="">Sp 2</a></td>
...
 <td><a href="">Sp n</a></td>
</tr>

wie gesagt, bei dieser Variante, wie bei anderen auch, reagiert optisch nicht die ganze Zeile als link, sondern nur jede einzelne Zelle.

[trunx]

Hi,

Ich glaub das Problem ist noch nicht ausreichend verstanden worden: es geht nicht darum, die ganze Zelle einer Tabelle als link zu setzen, sondern die ganze Zeile, in der die Zelle ist und das ohne javascript (wenns geht).

In der Tabelle sind zeilenweise die wichtigsten Informationen zu einem bestimmten event aus einer Datenbank gelistet: Titel, Ort, Uhrzeit

Genaueres zum event findet sich auf der verlinkten Seite, es würde also ein link reichen, auch optisch ist es angenehmer eine Einheit wahrzunehmen, daher will ich sozusagen die ganze Zeile als link haben. Man könnte natürlich eine vierte Zelle pro Zeile anhängen mit stets gleichem Inhalt: "weitere Informationen" und nur jeweils diese Zellen verlinken. Sieht aber auch blöd aus und ist redundante Info.

vielen Dank

ps: Falls jemand der Meinung ist, dass sei Grundlagen-html und unendlich oft bereits hier gepostet, bitte keine Belehrung über meine Blödheit, sondern einfach einen link zu einer Lösung setzen - danke.
pps: Ich weiß nämlich schon, dass ich blöd bin ;-)
ppps: und Hoffnung auf Besserung ist wohl auch nicht in Sicht.
4pS: das gilt natürlich auch, wenn jemand der Meinung ist, das sei Grundlagen-css usw.
5ps=ppppps
6ps: im übrigen wäre es bereits hilfreich, genau zu wissen, dass das Problem nicht lösbar ist.
7ps: obwohl ich es eigentlich nicht mag zu kapitulieren
8ps: das war das letzte post scriptum

[trunx]

Hi,

Vermutlich geht's nur ohne html-table, man muss wahrscheinlich die ganze Tabelle mit divs und css -  display:table usw. - nachbauen:

<a href...>
<div class="tr">
  <div class="td">Sp 1</div>
  <div class="td">Sp 2</div>
...
  <div class="td">Sp n</div>
</div>
</a>

Jedenfalls klappt damit die zeilenweise Verlinkung.

Leider haben aber divs die unangenehme Eigenschaft sich an keine Vorgaben zu halten: width: 20%; usw.  wird einfach ignoriert, auf diese Weise ne saubere Tabelle zu biegen, die überdies browserübergreifend gut aussieht ...

Also vllt hat ja jemand ne saubere div-Tabelle mit mehreren Zeilen und Spalten und definierten Breiten und Höhen.

vielen Dank

[Cybaer]

Hi,

dazu muss ich wohl nichts sagen,

Nein, wirklich nicht. :)

wenn wenigstens deine Tipps funktionieren würden ;-)

Oh, die funktionieren meistens. :)

Jedenfalls bis zu dem, was technisch machbar ist.

Was man weiß, wenn man z.B. HTML, jenseits stupiden Auswendiglernens, auch wirklich *versteht*. ;-)

wie gesagt, bei dieser Variante, wie bei anderen auch, reagiert optisch nicht die ganze Zeile als link, sondern nur jede einzelne Zelle.

Aha, es geht gar nicht um Funktionalität, sondern um "optische Reaktion".

Ich glaub das Problem ist noch nicht ausreichend verstanden worden:

Dann lerne zusätzlich zu HTML noch, präziser zu formulieren. ;)

es geht nicht darum, die ganze Zelle einer Tabelle als link zu setzen, sondern die ganze Zeile, in der die Zelle ist  und das ohne javascript (wenns geht).

Geht nicht ganz ohne JS.

6ps: im übrigen wäre es bereits hilfreich, genau zu wissen, dass das Problem nicht lösbar ist.

Dein Problem ist mit dem derzeitigen Stand der CSS-Implementationen nicht browserübergreifend lösbar.

Wenn man den IE bis Version 6 mit JS bedient (bzw. mit Behaviors), kann man aber ansonsten mit CSS arbeiten. Links wie geschrieben stylen, und auf die TR ein :hover kombiniert mit einem Nachfahrenselektor.

<a href...>
<div class="tr">

Was genau an der Vorschrift, daß A-Eemente keine Blockelemente beinhalten dürfen, hast Du nicht vestanden?

Gruß, Cybaer

PS: Lieber jemand der einstecken kann und dafür auch austeilt, als ein Langweiler! ;-)

[Cybaer]

Nachtrag:

Wenn man den IE bis Version 6 mit JS bedient (bzw. mit Behaviors), kann man aber ansonsten mit CSS arbeiten. Links wie geschrieben stylen, und auf die TR ein :hover kombiniert mit einem Nachfahrenselektor.

Noch was: Der IE 7 unterstützt noch nicht alle Pseudoklassen bei Nicht-As. Ein :focus-Effekt läßt sich also auch beim IE 7 nicht ohne JS bewerkstelligen ...

Gruß, Cybaer

[trunx]

Hi,

Aha, es geht gar nicht um Funktionalität, sondern um "optische Reaktion".

Deshalb unter DESIGN/LAYOUT ;-)

Wenn man den IE bis Version 6 mit JS bedient (bzw. mit Behaviors), kann man aber ansonsten mit CSS arbeiten. Links wie geschrieben stylen, und auf die TR ein :hover kombiniert mit einem Nachfahrenselektor.

War meine erste Idee, bin aber von abgegangen, da die Informationen auf den verlinkten Seiten zu wichtig sind, um sie jemanden der kein javascript aktiviert hat vorenthalten zu können.

<a href...>
<div class="tr">

Was genau an der Vorschrift, daß A-Eemente keine Blockelemente beinhalten dürfen, hast Du nicht vestanden?

Aha, du hälst dich also grundsätzlich an alle Vorschriften und machst nur das, was du darfst *lach* , wie gesagt, ich kapituliere so leicht nicht und wenn was nicht so funktioniert, wie ich es gern hätte, geh ich auch schon mal nen unvorschriftsmäßigen Weg ;-) . Bin jetzt beim basteln soweit, statt div span zu nehmen, wär schön, wenn das mal jemand nachbauen würde:

css:
span.table { display:table; ... }
...

html:
<a href...>
<span class="tr">
  <span class="td">Sp 1</span>
  <span class="td">Sp 2</span>
...
  <span class="td">Sp n</span>
</span>
</a>

Das funktioniert jetzt soweit auf allen Browsern, die ich hier hab. Wie gesagt problematisch ist daran nun, dass die Tabelle als solche zwar aufgebaut wird, sprich die Zeilen sind korrekt, aber nicht die Spalten, da jede Zelle ihre Breite nur nach Inhalt berechnet und nicht nach den css-Vorgaben.

vielen Dank

[Cybaer]

Hi,

Deshalb unter DESIGN/LAYOUT ;-)

Guuut! :-)

Wenn man den IE bis Version 6 mit JS bedient (bzw. mit Behaviors), kann man aber ansonsten mit CSS arbeiten. Links wie geschrieben stylen, und auf die TR ein :hover kombiniert mit einem Nachfahrenselektor.
War meine erste Idee, bin aber von abgegangen, da die Informationen auf den verlinkten Seiten zu wichtig sind, um sie jemanden der kein javascript aktiviert hat vorenthalten zu können.

? Jeder ohne JS hat die Links, jeder kann den Links über die volle Zeile folgen.

Du redest von Info, ich von einem optischen Effekt, den auch nur alte IEs mit JS realisieren können. Also ich sehe da qualitative Unterschiede in den Aussagen ... :)

Was genau an der Vorschrift, daß A-Eemente keine Blockelemente beinhalten dürfen, hast Du nicht vestanden?
Aha, du hälst dich also grundsätzlich an alle Vorschriften und machst nur das, was du darfst *lach* ,

Nein, aber ich weiß genau, wo ich bedenkenlos gegen die Vorschriften verstoßen kann, und wo ich es besser sein lasse. Du hingege kennst offensichtlich nicht mal die Vorschriften hinreichend. Auch hier sehe ich einen qualitativen Unterschied. ;)

span.table { display:table; ... }

Oh, der IE7 kann das mittlerweile? (rhetorische Frage ;))

Das funktioniert jetzt soweit auf allen Browsern, die ich hier hab. Wie gesagt problematisch ist daran nun, dass die Tabelle als solche zwar aufgebaut wird, sprich die Zeilen sind korrekt, aber nicht die Spalten, da jede Zelle ihre Breite nur nach Inhalt berechnet und nicht nach den css-Vorgaben.

Wie wäre es mit display:block, width, overflow? Aber egal: Ich schrieb ja schon, wie ich es selbst lösen würde. Das reicht mir ... ;-)

Gruß, Cybaer

[trunx]

Hi,

also das Optimum wäre doch wohl so was:

css:
tr:hover td a { color:... }

html:
<tr>
 <td><a href="url">Sp 1</a></td>
 <td><a href="url">Sp 2</a></td>
 ...
 <td><a href="url">Sp n</a></td>
</tr>

die Tabelle bleibt Tabelle und das Layout wird über css gemacht, alles sehr schön, aber dieser ... IE macht das wieder nicht *grrr*! Gebt mir doch bitte mal nen Tipp, warum nicht und was man machen kann.

vielen Dank trunx

[Cybaer]

Hi,

die Tabelle bleibt Tabelle und das Layout wird über css gemacht, alles sehr schön, aber dieser ... IE macht das wieder nicht *grrr*! Gebt mir doch bitte mal nen Tipp, warum nicht und was man machen kann.

? Habe ich bereits geschrieben!

Für IE<=6 nimm halt JS!

Gruß, Cybaer

[trunx]

Hi,

Für IE<=6 nimm halt JS!

naja wollte ich nicht, aber was soll man machen :-( hier für Leute, die die (js)Lösung haben wollen, noch der code:

css: wie oben

javascript:
<!--[if lt IE 7]>
<script language="javascript">
function an(i)
{
var k = i.firstChild;
while (k != null) {
k.firstChild.style.color="#ff0000";
k = k.nextSibling;
}
}
function aus(i)
{
var k = i.firstChild;
while (k != null) {
k.firstChild.style.color="#0000aa";
k = k.nextSibling;
}
}
</script>
<![endif]-->

html:
<tr onmouseover="an(this)" onmouseout="aus(this)">
 <td><a href="">Sp 1</a></td>
 <td><a href="">Sp 2</a></td>
...
 <td><a href="">Sp n</a></td>
</tr>

trotzdem vielen Dank

bye trunx

[Cybaer]

Hi,

naja wollte ich nicht, aber was soll man machen :-(

Eben. :-)

hier für Leute, die die (js)Lösung haben wollen, noch der code:

Ähm, ...

<!--[if lt IE 7]>
<script language="javascript">
function an(i)
(...)
<tr onmouseover="an(this)" onmouseout="aus(this)">

... für ältere IEs bindest Du eine Funktion ein, die von dem für jeden Browser zugänglichen MouseOver-Script angesprungen werden kann? Klingt ziemlich sub-optimal. ;-)

Eine von mehreren Lösungsmöglichkeiten: Setze auch die Eventhandler nur mit JS, und laß den HTML-Code frei von JS.

Gruß, Cybaer

[trunx]

Hi,

du meinst etwas in der Art:

function att() {
 document. ... .setAttribute("onmouseover", "an(this)");
...
}

doch wie willst du das einbinden? über onload="att()" z.B. im body-tag?

und den Html-code frei von JS lassen, meinst du damit ne Verknüpfung mit ner externen js-Datei?

bye trunx

[Cybaer]

Hi,

function att() {
document. ... .setAttribute("onmouseover", "an(this)");

Eher so in der Art: document. ... onmouseover=function() { an(this); }

doch wie willst du das einbinden? über onload="att()" z.B. im body-tag?

Jep.

Oder in bei deinem bissherigen JS hinzufügen: window.onload=att;

und den Html-code frei von JS lassen, meinst du damit ne Verknüpfung mit ner externen js-Datei?

Nein (aber gerne auch das ;-)). Wichtig ist nur, daß die onMouse...-Events nur ausgeführt werden, wenn sie auch wirklich notwendig sind - und insbesondere, daß die Browser an() und aus() nur dann anspringen, wenn diese Funktionen überhaupt vorhanden sind. Und dafür ist der genannte Weg halt der sinnvollste ... ;-)

Gruß, Cybaer

[trunx]

okay, danke, sieht jetzt wie folgt aus:

<!--[if lte IE 7]>
<script language="javascript">

window.onload = function att() {
var i = document.getElementsByTagName("tr");
for (var j = 0; j < i.length; j++) {
if (i[j].className == "tn") {
i[j].onmouseover = function an() {
var k = this.firstChild;
while (k != null) {
k.firstChild.style.color="#ff0000";
k = k.nextSibling;
} }
i[j].onmouseout = function aus() {
var k = this.firstChild;
while (k != null) {
k.firstChild.style.color="#0000ff";
k = k.nextSibling;
} } } } }

</script>
<![endif]-->

bye trunx

[Cybaer]

Hi,

okay, danke, sieht jetzt wie folgt aus:

Ich hab's nicht getestet, aber wo wir uns der Perfektion nähern ;-): Der wohl einzige Knackpunkt wäre wohl jetzt noch beim IE 4, da der das Script auch ausführt, aber damit nichts anfangen kann. Das wäre dann entweder auch über den CC zu bewerkstelligen, oder durch eine Klammerung à la: if(document.getElementsByTagName)

Gruß, Cybaer